Dynamic object creation inside another object

Question

I have this in constructor

this.state = {
  inputs : {}
}

This in handleInputChange (triggered on blur of input)

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      inputs[name]: value
    });
  }

So that my state will look like

inputs : { name1 : "text1", "name2": "text2" }

I am getting this syntax error

 Unexpected token, expected , (20:12)

this.setState({
> 20 |       inputs[name]: value
     |             ^
  21 |     });

What is the correct syntax for this?

Mohammed Ashfaq · Accepted Answer · 2018-09-19 09:58:49Z

3

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;
  let updatedInputs = this.state.inputs;
  updatedInputs[name]= value;
  this.setState({
    inputs: updatedInputs
  });
}

edited Sep 19, 2018 at 9:58

answered Sep 19, 2018 at 9:40

Mohammed Ashfaq

3,4262 gold badges19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

phantomCoder Over a year ago

this worked, we just need to declare updateInputs, else its throwing error. +1

Luca Kiebel · Accepted Answer · 2018-09-19 09:36:54Z

2

Instead of passing an Object literal, pass a reference to an object instead.

With this you can add a computed (or semi-computed) property to the Object before passing it.

handleInputChange(event) {
  const target = event.target;
  const value = target.value;
  const name = target.name;
  let state = {inputs: this.state.inputs};
  state.inputs[name] = value

  this.setState(state);
}

edited Sep 19, 2018 at 9:36

answered Sep 19, 2018 at 9:30

Luca Kiebel

10.1k7 gold badges34 silver badges47 bronze badges

1 Comment

phantomCoder Over a year ago

this.state already has a object inputs. I want all the new key:value pairs inside that. like inputs : { name1 : "text1", "name2": "text2" }

R. Wright · Accepted Answer · 2018-09-19 10:03:17Z

1

While the above will work, it's better to manage state in a bunch of 'smaller' properties than in one big object. The reason is everything that depends on the top level state property (i.e. inputs) updates every time it changes. If you make each input it's own property directly in state, you'll have less to update, and it should be faster.(It might not be noticeable for this case.)

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({name: value});
}

answered Sep 19, 2018 at 10:03

R. Wright

1,0356 silver badges9 bronze badges

1 Comment

phantomCoder Over a year ago

Thats a good, but in this case I have few other info in state and for saving form data I just need to serialize inputs and send it via post

Tiisetso Tjabane · Accepted Answer · 2018-09-19 09:39:12Z

0

I believe the is problem is the inputs variable is not initiated.

this should work

handleInputChange(event) {
const target = event.target;
const value = target.value;
const name = target.name;
let inputs = {}
this.setState({
  inputs[name]: value
});

}

answered Sep 19, 2018 at 9:39

Tiisetso Tjabane

2,1062 gold badges20 silver badges26 bronze badges

1 Comment

phantomCoder Over a year ago

inputs is initialized, please see my constructor.

Collectives™ on Stack Overflow

Dynamic object creation inside another object

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related