freeCodeCamp/guide/english/certifications/front-end-libraries/react/pass-an-array-as-props/index.md

title

title
Pass an Array as Props

Pass an Array as Props

---

Problem Explanation

To pass an array as a prop, first an array must be declared as a "tasks" prop on each of the components to be rendered:

---

Solutions

Solution 1 (Click to Show/Hide)

const List = props => {
  return <p></p>;
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>To Do Lists</h1>
        <h2>Today</h2>
        <List tasks={["Walk", "Cook", "Bake"]} />
        <h2>Tomorrow</h2>
        <List tasks={["Study", "Code", "Eat"]} />
      </div>
    );
  }
}

Then, the props must be handled inside the "List" component:

const List = props => {
  return <p>{props.tasks.join(", ")}</p>;
};

// ... same as above

Code Explanation

• The .join(", ") method is used to take each element from within the array and join them into a string to be displayed.
• We are using the modularity of React in this example to display the tasks passed by two different components to a common component which renders the final HTML.