How to write a simple functional component that return a array list using map method

Question

I'm trying to loop through a simple array inside a functional component so it returns list of names inside the array. The error I get is Person(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

const Person = () => {

  var persons = ["John", "Ron"];

  persons.map(p => {
    return  (
      <div> 
         <ul> 
            <li> I am {p} </li>
         </ul>
      </div>
    ) 
  })
}

you're not returning anything from the component, but only inside the map iteration — Sterling Archer
– Sterling Archer, Commented Aug 6, 2018 at 1:42
Also note that the block inside your map can be simplified to persons.map(p => (( <div ... </div> )); since it's technically a single line return statement — Sterling Archer
– Sterling Archer, Commented Aug 6, 2018 at 1:47

Ronit Mukherjee · Accepted Answer · 2018-08-06 02:13:37Z

1

Repeat only the <li> inside map because it's List item.
Use array index as key as person name can be the same in the real scenario.

const Person = () => {
  var persons = ["John", "Ron"];

  return (
  <div>
      <ul>
        {
        	persons.map((p,i) => {
          	return (<li key={i}> I am {p} </li>)
        	})
        }
      </ul>
    </div>
    )
};

ReactDOM.render(<Person />, document.getElementById("root"));

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id="root"></div>

answered Aug 6, 2018 at 2:13

Ronit Mukherjee

4052 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tholle · Accepted Answer · 2018-08-06 01:51:17Z

1

You have to return the resulting array of map or undefined will be returned from the Person component, which React doesn't allow.

const Person = () => {
  var persons = ["John", "Ron"];

  return persons.map(p => (
    <div key={p}>
      <ul>
        <li> I am {p} </li>
      </ul>
    </div>
   ));
};

ReactDOM.render(<Person />, document.getElementById("root"));

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id="root"></div>

edited Aug 6, 2018 at 1:51

answered Aug 6, 2018 at 1:45

Tholle

113k22 gold badges209 silver badges198 bronze badges

3 Comments

Deke Over a year ago

got it! map returns and then the component also returns

Ronit Mukherjee Over a year ago

@Deke Practically the above solution is not completely correct as per me. As to list the People whole structure should not be repeated but only li should be repeated. As per above code whole structure of the div will be repeated for each person, which according to me is not correct.

Tholle Over a year ago

@RonitMukherjee I think Deke knows that and can change that as he see fit. The question was more specifically why the error Person(...): Nothing was returned from render... occurred.

Collectives™ on Stack Overflow

How to write a simple functional component that return a array list using map method

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related