title: React - Handling and validating a dynamic number of inputs
body: <p><strong>Background:</strong> I am relatively new to React, and I am attempting to create a React flashcard site to add to my portfolio. I want to create an app that will create &quot;flashcards&quot; for each letter in the selected Japanese alphabet. Hiragana contains about 107 letters/combo letters and Katakana contains about the same. The alphabets share many of the same letters, but they are visually written differently. i.e. Hir: a = あ; Kat: a = ア. This means each alphabet has to be uniquely identifiable when attempting to validate any given input's data.</p>
  <p><strong>Problem:</strong> How to dynamically create all flashcards without manually creating a state for each.</p>
  <p><strong>Json data:</strong> <a href="https://github.com/justin-barfield/japanese-flashcards/blob/main/client/src/jCharacters.json" rel="nofollow noreferrer">jCharacters.json</a></p>
  <p><strong>Card creation code:</strong></p>
  <pre><code>&lt;div className=&quot;row&quot;&gt;
      {Object.keys(this.state.jCharacters.hiragana.hir).map( (key, index) =&gt; (
          &lt;div className=&quot;card text-center&quot; key= {index}&gt;
              &lt;div&gt;
                  &lt;h5 className=&quot;card-title&quot; &gt;{this.state.jCharacters.hiragana.hir[key].character}&lt;/h5&gt;
                  &lt;input type=&quot;text&quot; name={this.state.jCharacters.hiragana.hir[key].characterName} value={this.state.input[index]} onChange={this.handleChange.bind(this)} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      ))}
  &lt;/div&gt;
  </code></pre>
  <p><strong>handleChange:</strong> Current code adds a new state with the characterName for each input. This is flawed.</p>
  <pre><code>Change(event) {
      const { name, value } = event.target;
      this.setState({
          [name]: value
      });
  };
  </code></pre>
  <p>Any input is appreciated to get past this roadblock.</p>