React State with object

Question

I am trying to update my state from my react dynamically, this is my current state.

this.state = {
      title: "",
      image: "",
      imageFile: "",
      formTitle: "",
      formMessage: "",
      formImage: "",
      Item: {
        name: "Name",
        price: "",
        quantity: "",
        discount: "",
        shipping: "",
        image: "",
        formType: ""
      }
    }

How do I update in my Textbox dynamically instead of one by one?

 setItemName = (name) => {
    this.setState({
      Item: {
        ...this.state.Item,
        name
      }
    });
  };

this is my attempt at solving this

and this is my Textbox using material UI

<TextField
                      className="my-24"
                      label="Item Name"
                      autoFocus
                      id="itemName"
                      name="itemName"
                      width={1}
                      value={this.state.Item.name}
                      onChange={this.setItemName}
                      variant="outlined"
                    />

Thanks!!

please describe more so people can help you .... as i understand from your que is you want to update key value dynamically from textfield . right ? — Arpit Vyas, Jun 02 '20 at 04:05
Does this answer your question? [Reactjs setState() with a dynamic key name?](https://stackoverflow.com/questions/29280445/reactjs-setstate-with-a-dynamic-key-name) — Emile Bergeron, Jun 02 '20 at 05:06

score 1 · Answer 1 · answered Jun 02 '20 at 04:20

As I understand from your doubt, you want to change the fields in state dynamically instead of writing the functions one by one....

setItemName = (changedValue, type) => {
  this.setState({
    Item: {
      ...this.state.Item,
      [type]: changedValue
    }
  });
};

And your TextField going to be...

<TextField
  className="my-24"
  label="Item Name"
  autoFocus
  id="itemName"
  name="itemName"
  width={1}
  value={this.state.Item.name}
  onChange={(changedValue) => this.setItemName(changedValue, 'name')}
  variant="outlined"
/>

You just need to pass the state field name in the setItemName argument. As for 'price' you need to write setItemName(changedValue, 'price')

score 0 · Answer 2 · answered Jun 02 '20 at 04:17

0

And nevermind,

I solve this,

This is my code for reference:

setItemValue = (field,value) => {
    console.log(field,value)
    this.setState(prevState => ({
      Item: {                   // object that we want to update
          ...prevState.Item,    // keep all other key-value pairs
          [field] : value       // update the value of specific key
      }
  }))

answered Jun 02 '20 at 04:17

Daniel Maclene

1

That's almost exactly what the 3 other answers have told you. Please do not post duplicate answers and instead accept the one that helped you the most. Though, you are encouraged to answer your own question _if you have something relevant to add_ that other answers have failed to provide. – Emile Bergeron Jun 02 '20 at 05:03

Jasmin Shaikh · Answer 3 · 2020-06-02T04:46:49.350

0

You can also try the following code

handleChange = e => {
  this.setState({
     Item: {
       ...this.state.Item,
      [e.target.name]: e.target.value
     }
});

Use name attribute as your state key :

<TextField
    rowsMax={4}
    placeholder="Enter name"
    value={name}
    name="name"
    onChange={this.handleChange}
  />

edited Jun 02 '20 at 04:46

answered Jun 02 '20 at 04:29

Jasmin Shaikh

174
3

score 0 · Answer 4 · answered Jun 02 '20 at 04:35

0

setItem = (key, value) => {
  this.setState({
    Item: {
      ...this.state.Item,
      [key]: value
    }
  });
});

answered Jun 02 '20 at 04:35

kyun

9,710
9
31
66

React State with object

4 Answers4