React. Why is the return inside a map, not the other way around?

June 12, 2022

I’m learning react and reading this code: https://github.com/john-smilga/react-advanced-2020/blob/master/src/tutorial/4-forms/final/1-controlled-inputs.js (long…)

What I don’t understand is this part (line 53-61):

    {people.map((person, index) => {
      const { id, firstName, email } = person;
      return (
        <div className='item' key={id}>
          <h4>{firstName}</h4>
          <p>{email}</p>
        </div>
      );
    })}

Why is the return inside a map ? Since the map is taking items from the array and operating on them individually, won’t there be multiple returns for each operation ?

Thank very much !

>Solution :

const l = [1, 2, 3]

const mapped_array = l.map(li => {
    console.log(li) // 1, 2, 3
    return 10 * li  
})

console.log(mapped_array)
/// [10, 20, 30]