Accessing array from render inside JSX

Question

I am trying to iterate through the returned array from render inside return.

class Example extends React.Component {
  render() {
    let actortype = 1;
    const arr1 = ['a', 'b', 'c'];
    const arr2 = ['x', 'y', 'z'];
    if (actortype == 1) {
      var array = [...arr1]; //clone arr1 to array
    } else {
      var array = [...arr2];
    }
    return (
      <div>
           //I want to map through the array returned above in render. I am doing something like this:
                array.map((index)=>{
                <div>testing</div>      
            })
         // seems not the right approach to  access array inside return. returns plain text
      </div>
    );
  }
}

Please share your feedback, how can I do that.

Just enclose the entire `array.map(...)` expression inside `{...} ` — Robin Zigmond, Mar 22 '20 at 11:56

score 3 · Answer 1 · answered Mar 22 '20 at 11:58

You use a JSX expression ({}) within the div, around the call to map:

<div>
    {array.map( item => <div>{item}</div>})}
</div>

and either use return or use a concise arrow function (I've done the latter above). For more on this latter point, see Why doesn't my arrow function return anything?

Muhammad Haseeb · Answer 2 · 2020-03-22T12:00:47.073

0

you are doing it right :

<div>
     {array.map( item =>{
      return <div>{item}</div>      
    })}
</div>

For condition above you can just use tertiary operator i.e.

    let actortype = 1;
    const arr1 = ['a', 'b', 'c'];
    const arr2 = ['x', 'y', 'z'];
    const array = actortype == 1 ? arr1 : arr2;

edited Mar 22 '20 at 12:00

answered Mar 22 '20 at 11:57

Muhammad Haseeb

1,269
12
22

1

yeah, It was a typo from me. Thanks – Muhammad Haseeb Mar 22 '20 at 12:02

score 0 · Answer 3 · answered Mar 22 '20 at 11:58

0

<div>
     {array.map(item =>(
      <div>{item}</div>      
     )}
</div>

answered Mar 22 '20 at 11:58

Tan Dat

2,888
1
17
39

Sajeeb Ahamed · Accepted Answer · 2020-03-22T12:09:39.177

You have done some mistakes. The map must need to return something. And rendering some HTML inside the map needs a key property.

class Example extends React.Component {
  render() {
    let actortype = 1;
    const arr1 = ["a", "b", "c"];
    const arr2 = ["x", "y", "z"];

    // Declare it here
    let array = [];

    if (actortype == 1) {
      array = [...arr1]; //clone arr1 to array
    } else {
      array = [...arr2];
    }
    return (
      <div>
        {array.map((value, index) => {
            // must return inside map and use a key property is a must
            return (<div key={index}>testing: {value}</div>)
        })}
      </div>
    );
  }
}
ReactDOM.render(<Example />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

Thanks for the nice explanation!! – Mohsin Mar 22 '20 at 12:27 — Mohsin, Mar 22 '20 at 12:27

score 0 · Answer 5 · answered Mar 22 '20 at 12:02

You should awoid using a name array as a name of your variable and name index as a name of variable in your loop.. so the code should look like that..:

class Example extends React.Component {
  render() {
    let actortype = 1;
    const arr1 = ['a', 'b', 'c'];
    const arr2 = ['x', 'y', 'z'];
    if (actortype == 1) {
      var new_array = [...arr1]; //clone arr1 to array
    } else {
      var new_array = [...arr2];
    }
    return (
      <div>
           //I want to map through the array returned above in render. I am doing something like this:
                new_array.map((array_item)=>{
                <div>{array_item}</div>      
            })
         // seems not the right approach to  access array inside return. returns plain text
      </div>
    );
  }
}

Accessing array from render inside JSX

5 Answers5