title: Rendering a component multiple times with different props in React
body: <p>I have one component that I'm trying to render four times, each time with different props. To be a little more succinct with my code and not actually write out the JSX for the component and its props each time, I was trying to use <code>map</code> to create different instances of the component. Right now, here's what that looks like:</p>
  
  <pre><code>import React, { Component } from 'react';
  import Panel from './components/Panel';
  import Results from './components/Results';
  import Intro from './components/Intro';
  
  const questionsMap = [0, 1, 2, 3];
  
  class React extends Component {
      constructor (props) {
          super (props);
          this.state = {
              questions: ['question1', 'question2', 'question3', 'question4'],
              answers: ['answers1', 'answers2', 'answers3', 'answers4']
          }
          this.onSelect = this.onSelect.bind(this);
      }
  
      onSelect(value) {
          /* Some code for when buttons are clicked */
      }
  
      render () {
          return (
              &lt;Intro /&gt;
              {questionsMap.map(i =&gt; {
              return &lt;Panel question={this.state.questions.i} answers={this.state.answers.i} onSelect={this.onSelect} /&gt;
              })}
              &lt;Results /&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>Right now I'm getting an <code>Unexpected token</code> error pointing to the line under my render that starts with <code>{questionsMap.map()}</code>, aka the part where I'm trying to actually do the mapping I mentioned. I assume I'm using the wrong syntax to accomplish what I want?</p>