如何使用单独的单选按钮表单元素在React元素上正确映射？

Question

I am trying to create a card element where users can vote "yes", "no", or "maybe" on an image. Right now it is reading like the radio buttons 90 options for one image, rather than 30 individual ones with 3 options. How do I map over each card so the form is specific to the image? The array will read as

{ userChoices: {
  characterName[0]:choice.value,
  characterName[1]:choice.value,
  ....
}}

const choiceCard = characterData.map((character, key) =>
  <div className="col-sm-12 col-md-3" id="choiceCard" key={character.id}>
    <div id="choiceContent">
      <img src={character.statusImage}/>
      <div id="choice-inner" className="form">
        <span>{character.name}</span>
        <div class="form-check">
          <input 
           class="form-check-input" 
           type="radio" 
           name="yes" 
           id="yes" 
           value="yes"/>
          <label class="form-check-label" for="yes">
            Yes
          </label>
        </div>
        <div class="form-check">
          <input 
           class="form-check-input" 
           type="radio" 
           name="no" 
           id="no" 
           value="no"/>
          <label class="form-check-label" for="no">
            No
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="maybe" id="maybe" value="maybe"/>
          <label class="form-check-label" for="maybe">
            Maybe
          </label>
        </div>
      </div>
    </div>
  </div>
);

Answer 1

You're close to where you want to be, there's just two things that need to be dealt with here:

1. Associating each set of buttons with a character.
2. Keeping track of the state for each character.

This is a natural use case for controlled components. A controlled radio button will look something like this:

<input
    key={someID}
    type="radio"
    value={choice}
    checked={this.state.choice === choice}
    onChange={() => this.handleChange(choice)}
/>

with a change handler:

handleChange = newChoice => {
    this.setState({
        choice: choice
    });
}

(see https://reactjs.org/docs/forms.html )

Applying this to your problem, you'd end up with something like this:

const choices = [
    "Yes",
    "No",
    "Maybe"
]

const choiceCard = characterData.map((character, key) => {
    return (
        <label key={character.id}>
            {character.name}
            {choices.map(choice => {
                return (
                    <input
                        key={choice}
                        type="radio"
                        value={choice}
                        checked={this.state.userChoices[key] === choice}
                        onChange={() => this.handleChange(choice, key)}
                    />
                );
            })}
        </label>
    );
});

And the following change handler:

handleChange = (choice, key) => {
    this.setState(prevState => ({
        userChoices: { ...prevState.userChoices, [key]: choice }
    }));
};

Here's a quick and dirty codepen you can play with to help your understanding: https://codepen.io/anon/pen/axzMxm?editors=0010