React Forms Updating nested state object - reconstructing the state object from input

Question

I've searched the react documentation, as well as several questions here and this article, but I'm confused as to how to accomplish this task. https://goshakkk.name/array-form-inputs/

I'm trying to iterate over a nested state object in a react application. the questions is an array of objects, each with title, description and options.

questions:   [
        {
          title:       'EKG',
          description: 'EKG changes affect risk',
          options:     [
            {
              value:       '1',
              description: 'ST Wave changes'
            }
          ],
        }

right now I'm just working with the title value before I work with the entire object.

I'm trying to create an event updater for the edit/new form, but I'm having trouble putting the question object back together to update state. Here is my form:

      {this.state.questions.map((q, i) => (
        <div>
          <label>Question {i+1 + '.'}</label>

          <input
            type="text"
            placeholder={`Question #${i+1}`}
            name="title"
            defaultValue={q.title}
            onChange={this.handleQuestionChange(i)}
          />
          <button type="button" className="small">-</button>
        </div>
        )
      )}

And here is my updater:

handleQuestionChange = (i) => (e) => {
    console.log(e.target.name, e.target.value, i)
    let stateCopy = Object.assign({}, this.state)
    const name = e.target.name
    const questions = stateCopy.questions.map((question, j) => (
      j === i ?
         question[name] = e.target.value
      :
        question[name] = question[name]

    ))
    console.log(stateCopy.questions, questions)
    stateCopy.questions = questions
    this.setState({questions: stateCopy.questions})
  }

it handles the first update fine, but since my conditional if statement in the handler squashes the object into one field, the 2nd update creates an error. I thought that question[name] would update the key:value pair, but it return NAN so I end up with this when logging the before and after question state:

{title: "EKG", description: "EKG changes affect risk", options: Array(1), NaN: "EKG4"}

changing the handler to this gets me closer...at least returns an object, but I can't access the variable name from e.target.value dynamically:

const questions = stateCopy.questions.map((question, j) => (
  j === i ?
     question[name] = {question: {name: e.target.value}}
  :
    question[name] = {question: {name: name}}

))

which gives me this for the question object, and eliminates the other two key value pairs. I don't think I need to manually iterate over every key: value pair just to set one of them.

{name: "EKGn"}

Any tips? I realize this may be more of a javascript / Object manipulation question than a react one, but i've tried several variations including using an string literal ES6 syntax for the dynamic name and it's still not working. x: question

Shazam · Accepted Answer · 2018-05-29 22:31:53Z

1

The problem was in the .map function. I'm posting the working code here, in case it helps anyone else. I'm not sure what the etiquette is for answering your own question.

  const questions = stateCopy.questions.map((question, j) => {
      if (j === i ) question[name] = e.target.value;
      return question;
    })

answered May 29, 2018 at 22:31

Shazam

3111 gold badge2 silver badges16 bronze badges

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

1 Comment

Sean Duggan Over a year ago

Self-answers are perfectly fine, although you have to wait until 48 hours after asking (So, in about 38 hours) to accept. Congrats!

Collectives™ on Stack Overflow

React Forms Updating nested state object - reconstructing the state object from input

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related