title: React pass props from multiple arrays in state
body: <p>I am trying to pass props from two arrays that are contained in the state of the react component.  One array is generated by the user and the other is already built in.  This is a bit over my head as I'm still new to React and am unsure how to correctly pass props.</p>
  
  <p>There are no errors here in the component, it's just that I don't know how to do it.</p>
  
  <p>I will explain below what I'm looking for, any help would be greatly appreciated</p>
  
  <p><strong>Main Component</strong></p>
  
  <p>In <code>this.state</code> below you will see <code>questions</code> (which works perfectly) then <code>hints</code>.  Questions is mapped over correctly however when I try to add in hints to map along with it, it returns all of the hints at once instead of in order and one by one.  I've tried just adding <code>(questions, hints)</code> but it doesn't return it correctly.</p>
  
  <pre><code>export default class AutoFocusText extends Component {
    constructor() {
      super();
  
      this.state = {
        active: 0,
        questions: [
          '1. Enter A Proper Noun',
          '2. Enter A Location',
          '3. Enter A Proper Noun that Describes Evil',
          '4. Describe Something Menacing',
          '5. Describe a fortified area',
          "6. A Woman's Name",
          '7. Describe a large area of mass'
        ],
        hints: [
          "Hint: Use words like Rebel, Hell's Angels",
          'Hint: Use a word such as Base, Bunker, Foxhole, Bedroom',
          'Hint: Use words like Empire, Ottoman, Mongols',
          'Hint: Freeze Ray, Leftover Fruitcake',
          'Hint: Castle, Bunker, Planet',
          'Hint: Astrid, Diana, Mononoke, Peach',
          'Hint: Use words such as Galaxy, Planet, Wal Mart'
        ],
        answers: []
      };
  </code></pre>
  
  <p>I'd like to take the user's inputs of answers and have it passed along as props into another component such as <code>properName1={this.state.value1}</code> and so on, I know that's mapping an array of answers, I'm just unsure how to do this.</p>
  
  <p>Below is the rest of the main component.</p>
  
  <pre><code>    this.submitHandler = this.submitHandler.bind(this);
      this.renderQuestion = this.renderQuestion.bind(this);
      this.onChange = this.onChange.bind(this);
    }
  
    renderQuestion() {
      const { questions, hints, active, value } = this.state;
  
      if (active &gt;= questions.length)
        return &lt;Crawler style={{ width: '500px', position: 'absolute' }} /&gt;;
  
      return questions.filter((quest, index) =&gt; index === active).map(quest =&gt; ( // get next question // map over selected question, the key prop allows react to
        &lt;FormElement
          key={active}
          text={quest}
          hint={hints}
          value={value}
          onChange={this.onChange}
        /&gt;
      ));
    }
  
    onChange(e) {
      this.setState({ value: e.target.value });
    }
  
    submitHandler(e) {
      e.preventDefault();
  
      const answers = [...this.state.answers, this.state.value]; //push new value to answsers array without mutation
      const value = ''; // clear input
      const active = this.state.active + 1; // index pointer
  
      this.setState({ answers, value, active });
    }
  
    render() {
      return (
        &lt;MainContainer&gt;
  
          &lt;DivStyle&gt;
            {/* Form Wrapper */}
            &lt;form onSubmit={this.submitHandler}&gt;
              {this.renderQuestion()}
              &lt;SubmitButton type="submit"&gt;Submit&lt;/SubmitButton&gt;
            &lt;/form&gt;
            &lt;ul&gt;
              {this.state.answers.map((ans, index) =&gt; {
                return (
                  &lt;li key={index}&gt;
                    {ans}
                  &lt;/li&gt;
                );
              })}
            &lt;/ul&gt;
          &lt;/DivStyle&gt;
        &lt;/MainContainer&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Child Component 1</strong>
  This is the dumb component where the questions (and where I want the hints as well) generated</p>
  
  <pre><code>class FormElement extends Component {
    constructor() {
      super();
    }
  
    componentDidMount() {
      //focus text input upon mounting component
      this.textInput.focus();
    }
  
    render() {
      const { text, hint, value, onChange } = this.props;
  
      return (
        &lt;div&gt;
          &lt;InputQuestion&gt;
            {text}
            {hint}
          &lt;/InputQuestion&gt;
          &lt;input
            className="inputstyling"
            ref={el =&gt; {
              this.textInput = el;
            }}
            onChange={onChange}
            type="text"
            value={value}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default FormElement;
  </code></pre>
  
  <p>At the moment, "hint" brings in all the hints at once, instead of one at a time and in order.  </p>
  
  <p><strong>Child Component 2</strong></p>
  
  <p>Finally the props needed to pass go here.  The array is throwing me as I've never passed props via an array</p>
  
  <pre><code>class Crawler extends Component {
    constructor() {
      super();
      this.state = {
        properName1: 'Rebel',
        noun1: 'frog',
        properName2: 'Empire',
        properName3: 'DEATH STAR',
        noun2: 'station',
        noun3: 'planet',
        personsName1: 'Leia',
        noun4: 'starship',
        pluralnoun1: 'people',
        noun5: 'galaxy'
      };
    }
    render() {
      return (
        &lt;ContainLeft style={{ padding: 0 }}&gt;
  
          &lt;CrawlHolder&gt;
            &lt;div class="fade" /&gt;
            &lt;section className="star-wars"&gt;
  
              &lt;div className="crawl"&gt;
  
                &lt;div className="title"&gt;
                  &lt;p&gt;Episode IV&lt;/p&gt;
                  &lt;h1&gt;A New Hope&lt;/h1&gt;
                &lt;/div&gt;
  
                &lt;p&gt;
                  It is a period of civil war.
                  {' '}
                  {this.props.properName1}
                  {' '}
                  spaceships, striking from a hidden
                  {' '}
                  {this.props.noun1}
                  , have won their first victory against the evil Galactic
                  {' '}
                  {this.props.properName2}
                  .
                &lt;/p&gt;
                &lt;p&gt;
                  During the battle,
                  {' '}
                  {this.props.properName1}
                  {' '}
                  spies managed to steal secret plans to the
                  {' '}
                  {this.props.properName2}
                  's ultimate weapon, the
                  {' '}
                  {this.props.properName3}
                  , an armored
                  {' '}
                  {this.props.noun2}
                  {' '}
                  with enough power to destroy an entire planet.
                &lt;/p&gt;
                &lt;p&gt;
                  Pursued by the Empire’s sinister agents, Princess
                  {' '}
                  {this.props.personsName1}
                  {' '}
                  races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the
                  {' '}
                  {this.props.noun3}
                  …
                &lt;/p&gt;
  
              &lt;/div&gt;
  
            &lt;/section&gt;
          &lt;/CrawlHolder&gt;
        &lt;/ContainLeft&gt;
      );
    }
  }
  export default Crawler;
  </code></pre>
  
  <p>Thank you for your help</p>