CODEWITHSUNDEEP
javascriptreactjsmaterial-uiformik
ArthurJ
ArthurJ

Reputation: 839

Unable to change my textfield value in material-ui with formik

I have the below code where I am setting a default value using the material-ui Textfield API within a formik fieldarray:

<TextField
   name={`myGroups.${index}.myGroupName`}
   value={`Group ${index+1}`}
   label="Group"
   InputProps={{ style: { backgroundColor: "white" }}}
   autoComplete="off"
   onChange={(e) => setFieldValue(`myGroups.${index}.myGroupName`, e.target.value)}
/>

Unfortunately with the above code, I am not able to change the value at all against this textfield. It seems to be read-only.

I have added the onChange call to update the Formik iniitial states values but to no avail.

Just can't seem to update the value.

Unsure what I am doing wrong?

Upvotes: 0

Views: 1561

Answers (1)

333daz
333daz

Reputation: 51

Here, you are are passing a hard-coded string to the values. You are supposed to map the corresponding value of each field.

<TextField
  name={`myGroups.${index}.myGroupName`}
  value={values.myGroups[index].myGroupName}
  label="Group"
  InputProps={{ style: { backgroundColor: "white" } }}
  autoComplete="off"
  onChange={handleChange}
/>

Please see the codesandbox: https://codesandbox.io/s/friendly-archimedes-85quw?file=/src/App.js:339-392

Upvotes: 2

Related Questions