Outputting List Dynamically in React JS

The previous post showed us how to output list of elements in React JS. But now we have a problem, we have a same type of data which is employee details and we wrote redundant code for each employee. There is a way to optimize that.

App.js

We have employees array from state. We need to convert our employees array to valid JSX to be used in JSX.

map() is the savior. map will get executed on each element. We will pass element of the array as input to it, in our case a single employee. You can name the argument anything, it doesn’t have to be employee. We are actually writing an arrow function here as an argument to map()

So this function employee which is passed as an argument to map() will get executed on each element of our array. This newly created arrow function employee will return each element from array, converted into valid JSX syntax.

Notice how we wrote JSX inside our arrow function to be returned. We simply fetched the data from state using {employee.name} and stored it props named name like this name = {employee.name}

Employee.js