freeCodeCamp Challenge Guide: 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:


Solution 1 (Click to Show/Hide)
const List = props => {
  return <p></p>;

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

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.