How to keep track of selections in array of radio button groups?

Question

I'm baffled over this problem that seems to have a simple solution right under my nose, but I can't find it.

I'm looping 42 groups of radio buttons, and I'm only as yet able to get one (out of 42 * 4 buttons) to be selected. I render the first statement, and each statement has 4 choices... Thank you so much for helping.

import React, { Component } from 'react'

class Acme extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selections: [],
      statements: "forty-two statements+separated by add signs".split('+')
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  // lost here -- ???
  handleChange(event) { 
    this.state.selections.push( event.target.value )
  }

  handleSubmit(event) {
    event.preventDefault()
    alert("Hello")
  }

  render() {
    return (
      <div className="pure-form">
        <h2>Acme</h2>
        <hr />
        <h3>
          Please read each statement and select a number 0, 1, 2 or 3 which indicates how much the statement applied to you <b>over the past week</b>. There are no right or wrong answers. Do not spend too much time on any statement.
        </h3>
        <form onSubmit={this.handleSubmit}>
          {
            this.state.statements.map(
              (statement, index) => (
                <div className="pure-g">
                  <div className="pure-u-1 pure-u-md-21-24 pure-control-group">
                    <h4>{index+1}. &nbsp; {statement}</h4>
                    <div className="pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={0} key={index}
                          checked={this.state.selections[index] === 0 }
                          onChange={this.handleChange} />
                        0
                      </label>
                    </div>
                    <div className="radio pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={1} key={index}
                          checked={this.state.selections[index] === 1}
                          onChange={this.handleChange } />
                        1
                      </label>
                    </div>
                    <div className="radio pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={2} key={index}
                          checked={this.state.selections[index] === 2 }
                          onChange={this.handleChange } />
                        2
                      </label>
                    </div>
                    <div className="radio pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={3} key={index}
                          checked={this.state.selections[index] === 3 }
                          onChange={this.handleChange } />
                        3
                      </label>
                    </div>
                  </div>
                </div>
              )
            )
          }
          <button type="submit" className="pure-button pure-button-primary">
            See Results
          </button>
        </form>
      </div>
    )
  }
}

export default Acme

Answer 1

You need to keep a map of selections with the key as the statement id. I have attached the sample code

class Acme extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selections: {},
      statements: "forty-two statements+separated by add signs".split('+')
    }
    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),
      }
    });
  }

  handleSubmit(event) {
    event.preventDefault()
    alert("Hello")
  }

  render() {
    return (
      <div className="pure-form">
        <h2>Acme</h2>
        <hr />
        <h3>
          Please read each statement and select a number 0, 1, 2 or 3 which indicates how much the statement applied to you <b>over the past week</b>. There are no right or wrong answers. Do not spend too much time on any statement.
        </h3>
        <form onSubmit={this.handleSubmit}>
          {
            this.state.statements.map(
              (statement, index) => (
                <div className="pure-g" key={index}>
                  <div className="pure-u-1 pure-u-md-21-24 pure-control-group">
                    <h4>{index+1}. &nbsp; {statement}</h4>
                    <div className="pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={`${index}-0`} key={`${index}-0`}
                          checked={this.state.selections[index] === 0 }
                          onChange={this.handleChange} />
                        0
                      </label>
                    </div>
                    <div className="radio pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={`${index}-1`} key={`${index}-1`}
                          checked={this.state.selections[index] === 1}
                          onChange={this.handleChange } />
                        1
                      </label>
                    </div>
                    <div className="radio pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={`${index}-2`} key={`${index}-2`}
                          checked={this.state.selections[index] === 2 }
                          onChange={this.handleChange } />
                        2
                      </label>
                    </div>
                    <div className="radio pure-u-5-24">
                      <label className="pure-radio">
                        <input type="radio" value={`${index}-3`} key={`${index}-3`}
                          checked={this.state.selections[index] === 3 }
                          onChange={this.handleChange } />
                        3
                      </label>
                    </div>
                  </div>
                </div>
              )
            )
          }
          <button type="submit" className="pure-button pure-button-primary">
            See Results
          </button>
        </form>
      </div>
    )
  }
}

ReactDOM.render(
  <Acme />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>