Skip to main content

Taking the code from here:

style.monday.com

    <TextField

      placeholder={text("Placeholder", "default placeholder")}

      debounceRate={number("Debounce Rate (see console log)", 0)}

      iconsNames={{ primary: "Primary Icon - could be any icon" }}

      iconName={text("Primary Icon Name", "fa-circle")}

      secondaryIconName={text("Secondary Icon Name", "")}

      validation={select(

        "Validation State",

        {

          None: null,

          Error: { status: "error", text: "error" },

          Success: { status: "success", text: "success" },

          Assist: { status: "", text: "assist text" }

        },

        { status: "", text: "assist text" }

      )}

      id="Knobs"

      disabled={boolean("Disabled", false)}

      readonly={boolean("Readonly", true)}

      size={select(

        "Size",

        { Small: TextField.sizes.SMALL, Medium: TextField.sizes.MEDIUM, Large: TextField.sizes.LARGE },

        TextField.sizes.MEDIUM

      )}

      clearOnIconClick={boolean("clear data in icon click", true)}

      labelIconName={text("FieldLabel Icon Name", "fa-envelope")}

      title={text("Text filed label", "FieldLabel")}

      showCharCount={boolean("show hide char count", true)}

      required={boolean("Filed is required", false)}

    />

I’ve also imported TextField:


import TextField from "monday-ui-react-core/dist/TextField.js"

When I run the app, none of the above functions are defined:


./src/App.js

Line 22:20: ‘text’ is not defined no-undef

Line 23:21: ‘number’ is not defined no-undef

Line 25:17: ‘text’ is not defined no-undef

Line 26:26: ‘text’ is not defined no-undef

Line 27:19: ‘select’ is not defined no-undef

Line 38:17: ‘boolean’ is not defined no-undef

Line 39:17: ‘boolean’ is not defined no-undef

Line 40:13: ‘select’ is not defined no-undef

Line 45:25: ‘boolean’ is not defined no-undef

Line 46:22: ‘text’ is not defined no-undef

Line 47:14: ‘text’ is not defined no-undef

Line 48:22: ‘boolean’ is not defined no-undef

Line 49:17: ‘boolean’ is not defined no-undef

Hi @iateadonut!


All of our design components come directly from our monday-ui-react-core repo. You can find the link to it here: GitHub - mondaycom/monday-ui-react-core: Official monday.com UI resources for application development in React.js.


I think the above link will provide a bit more clarity on how to import these features!

I’m sorry, I don’t get it.


The function I’m referring to is like the text() function from this line:


placeholder={text("Placeholder", "default placeholder")}

I have the following imports:


import TextField from "monday-ui-react-core/dist/TextField.js"

import "monday-ui-react-core/dist/main.css"

Hi @iateadonut,


No worries! Okay, so actually I see that the issue you’re running into is that you’re actually including the constructors for each of the Text fields.


Instead, it should be something along the lines of


placeholder="This is my placeholder text"

debounceRate=0

iconNames="primary"

....

So on and so forth. So you don’t need the prompts for each field type (i.e. you don’t need to include “text” or “number” etc. etc.)


Give this a try and let me know if it helps!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings