Rendering a component multiple times with different props in React

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 map to create different instances of the component. Right now, here's what that looks like:

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 (
            <Intro />
            {questionsMap.map(i => {
            return <Panel question={this.state.questions.i} answers={this.state.answers.i} onSelect={this.onSelect} />
            })}
            <Results />
        );
    }
}

export default App;

Right now I'm getting an Unexpected token error pointing to the line under my render that starts with {questionsMap.map()}, 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?


Here is the correct syntax:

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 (
            <div>
              <Intro />
              {questionsMap.map(i => {
              return <Panel question={this.state.questions[i]} answers={this.state.answers[i]} onSelect={this.onSelect} />
            })}
              <Results />
            </div>
        );
    }
}

export default App;

But there are a few things that are not exactly a good practice, I assume this is some sort of test so I don't expect that you will name one of your components React.

On top of that you could simply map through the state, I would change the code a bit like this:

import React, { Component } from 'react'; import Panel from './components/Panel'; import Results from './components/Results'; import Intro from './components/Intro';


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 (
            <div>
              <Intro />
              {this.state.questions.map((question, questionIndex) => {
                return (<Panel
                question={question}
                answers={this.state.answers[questionIndex]}
                onSelect={this.onSelect} />
              )
            })}
              <Results />
            </div>
        );
    } }

export default App;

Alternatively you could have an array of objects with a field named question and another named answer, just to give you another idea.

This example renders a different greeting depending on the value of isLoggedIn prop. Element Variables . You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn’t change. Consider these two new components representing Logout and Login buttons:


At first, render can return only one element. You should wrap your components with div. At second, this.state.questions.i is wrong syntax. Use this.state.questions[i]. Finally, I think there's the better approach:

return (
  <div>
    <Intro />
    {
      this.state.questions.map((question, i) => {
        return <Panel question={question} answers={this.state.answers[i]} onSelect={this.onSelect} />
      })
    }
    <Results />
  </div>
);

In Concurrent Mode, React might end up rendering a component multiple times, but throw away the render output each time if other updates invalidate the current work being done; How Does React Handle Renders? Queuing Renders. After the initial render has completed, there are a few different ways to tell React to queue a re-render: Class components:


  1. Dont name your class React
  2. Unless you're using React 16 you need to wrap everything inside a div (on render method)
  3. You don't need questionsMap . You can just use the index that map gives you for free, the map function's first argument is the element, and the second will be the index.
  4. Deconstruct your questions and answer inside render, before the return, like so: `const { questions, answers } = this.state; For readability.
  5. Goodluck

Props mix when using the same component multiple times on a page in React. Doing things like that in the render() may have some side effects. extends React


If you are setting state at three different stages then the component will re-render three times as well. setState() will always trigger a re-render unless conditional rendering logic is implemented in shouldComponentUpdate().


You haven't used the map function correctly.

Please check with the below 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 (
            <Intro />
            {questionsMap.map((_,i) => {
            return <Panel question={this.state.questions[i]} answers={this.state.answers[i]} onSelect={this.onSelect} />
            })}
            <Results />
        );
    }
}

export default App;

1st argument in map is the value and second argument is index. Since, we don't need value from map so I have given it as _.

After a React component does mount, it will be listening for any React props or state that has changed. Once it detects something has changed, it will, by default, re-render the entire React component and it’s child components. Is it bad to re-render multiple React components? Yes, and no.


In the code above the component is inherited from React.PureComponent, each time the state or props are updated it compares the previous and next value — if the values are the same the Render


React is pretty flexible but it has a single strict rule: All React components must act like pure functions with respect to their props. Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of “state”. State allows React components to change their output over time in response to


The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.