How to call setState in react with nested objects and unknown key

Question

My state looks like this

state = {
  basic: {
    entry: 'index.js',
    output: {
      path: 'dist',
      filename: 'bundle.js',
    }
  }
}

I have defined a callback for input onChange event :

handleUpdateString = (e) => {
  const name = e.target.name
  const value = e.target.value
  this.setState({ [name]: value })
  console.log(this.state)
}

say my input name is 'basic.entry'

my state is updated, but instead of having this.state.basic be { entry: 'some value'}

I end up with a new key in my state : { basic.entry: 'some value' }

I have tried using dot-object to convert the dot-seperated string to a nested object, and passing this to setState but the state appears to be unchanged.

What are simple solutions to this problem ?

Try this.setState({ name: value });

jmargolisvt
– jmargolisvt

2017-02-19 19:02:43 +00:00
Commented Feb 19, 2017 at 19:02 — jmargolisvt
– jmargolisvt, Commented Feb 19, 2017 at 19:02

J. Mark Stevens · Accepted Answer · 2017-02-19 19:07:56Z

0

Use a switch statement with explicit setState.

answered Feb 19, 2017 at 19:07

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:09:23Z

0

This is not a React question but a pure JavaScript question on how to set a nested property on any object using a dot-notated string for the property. There is an answer here: Javascript object key value coding. Dynamically setting a nested value

Using that example in React:

handleUpdateString = (e) => {
  const name = e.target.name
  const value = e.target.value
  const state = Object.assign({}, this.state);
  setData(name, value, state);
  this.setState(state);
  console.log(this.state)
}

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Feb 19, 2017 at 19:12

Matt

3,6804 gold badges40 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to call setState in react with nested objects and unknown key

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related