How to loop inside React JSX

How to loop in React component JSX

If you need to loop to generate a set of JSX local elements, you can create a loop and then add JSX to the array:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) { items.push(<Element key={index} />) }

Now when rendering JSX, you can embeditemsArrange the array by wrapping it in curly braces:

render() {
  const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) { items.push(<li key={index}>{value}</li>) }

return ( <div> {items} </div> ) }

You can perform the following operations directly in JSX:mapInstead of a for-of loop:

render: function() {
  const elements = ['one', 'two', 'three'];
  return (
      {, index) => {
        return <li key={index}>{value}</li>

Download mine for freeResponse Handbook

More response tutorials: