0

I've had help getting this far, and I need a bit more help. Somehow the first click doesn't register anything but an empty array. I'm looking at results from the console logger in the handleChange method. The code works wonderfully for going back and changing selections, but I'm unable to validate the form because, at present, I can only see 41 elements in the results. Please help me out here. Thank you.

after 4 clicks: (0: 0, 1: 1, 2: 2, 3: 0)

click1 > []
click2 > {"0":0}
click3 > {"0":0,"1":1}
click4 > {"0":0,"1":1,"2":2}

how to get value of element clicked as well as other values?

import React from 'react'

export default class Acme extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selections: [],
      statements: /*  Array of 42 strings */
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    const [id, value] = event.target.value.split('-')
    this.setState({
      selections: {
          ...this.state.selections,
          [id]: parseInt(value, 10)
      }
    })
    console.log(JSON.stringify(this.state.selections))
  }

  handleSubmit(event) {
    event.preventDefault()
    alert('not yet')
  }

  render() {
    return (
      <div>
        <h2>Acme</h2>
        <hr />
        <h3>  instructions...  </h3>

        <form onSubmit={this.handleSubmit}>
          {
            this.state.statements.map(
              (statement, index) => (

                 <h4> {index+1}. &nbsp; {statement} </h4>

                  <input type="radio" value={`${index}-0`}
                      key={`${index}-0`} id={`${index}-0`}
                      checked={this.state.selections[index] === 0 }
                      onChange={this.handleChange} />
                  <label htmlFor={`${index}-0`}>  0 </label>

                  <input type="radio" value={`${index}-1`}
                      key={`${index}-1`} id={`${index}-1`}
                      checked={this.state.selections[index] === 1}
                      onChange={this.handleChange } />
                  <label htmlFor={`${index}-1`}>  1 </label>

                  <input type="radio" value={`${index}-2`}
                      key={`${index}-2`} id={`${index}-2`}
                      checked={this.state.selections[index] === 2 }
                      onChange={this.handleChange } />
                  <label htmlFor={`${index}-2`}>  2 </label>

                  <input type="radio" value={`${index}-3`}
                      key={`${index}-3`} id={`${index}-3`}
                      checked={this.state.selections[index] === 3 }
                      onChange={this.handleChange } />
                  <label htmlFor={`${index}-3`}>  3 </label>
              )
            )
          }
          <button type="submit"> See Results </button>
        </form>
      </div>
    )
  }
}
listenlight
  • 654
  • 1
  • 12
  • 27
  • 1
    setState is async so immediately after setState you will not get the updated state value, use setState callback to check the updated values or do console.log inside render method. `setState` callback like this: `this.setState({...}, () => console.log(this.state.selections))` – Mayank Shukla Aug 21 '18 at 10:09
  • 1
    another suggestion is, setState is async so instead of using `this.state` inside setState use functional setState (prevState concept), like this: `this.setState(prevState => {....})` – Mayank Shukla Aug 21 '18 at 10:11

0 Answers0