Intro to React > Rendering Lists

Rendering Lists

In this example we're rendering a list of elements in JSX. This lesson combines aspects of previous lessons, namely that any JavaScript expression can be rendered in JSX, JSX itself an be rendered as JavaScript, and Arrays output each element to the screen.

So, here we use the JavaScript map function to loop over plain javascript objects in the tasks array. Map requires a callback function as the first argument, which we've defined here. This function passes the current element as the task argument at the time the function is evaluated for each element in the array. We're using an arrow function to return an expression within the parenthesis.

After the arrow =>, the return expression begins as a JSX expression, which is a <div>. And, as we know about JSX, we can embed dynamic JavaScript inside the <div>, which we do here with curly braces. Inside the curly places, we access the current country's title. The end result is that we're rendering a list of <div>s with the country's title- nothing more, nothing less.

All this is accomplished with the simple understanding that any JavaScript expression can be rendered inside JSX curly braces. Learning React is often more about re-learning JavaScript concepts.

Lesson 14/22

const tasks = [
  { title: "Swab the deck" },
  { title: "Drop anchor" },
  { title: "Find treasure" },
];

export default function App() {
  return (
    <div>
      <h1> Captain's Tasks </h1>
      {tasks.map((task) => (
        <div> {task.title} </div>
      ))}
    </div>
  );
}

Open Sandbox