React - Pass an Array as Props

JavaScript
1

i can’t understand the problem i tried the hint . it says this" The

List

component should render the value from the

tasks

prop in the

p

tag."

Your code so far

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>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.67

Challenge: React - Pass an Array as Props

Link to the challenge:

2

This child component is returning an empty p element. It should be rendering the props which are passed to it. There is an example in the instructions for this challenge which shows you exactly how to do this.

This is how that part of the code looks when the lesson is reset to its initial state:

const List = (props) => {
  { /* Change code below this line */ }
  return <p>{}</p>
  { /* Change code above this line */ }
};

All you have done is remove those comments and the curly brackets inside the p element.

3

i don’t understand the problem and therefore can’t solve it

Your code so far

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>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 Edg/114.0.1823.67

Challenge: React - Pass an Array as Props

Link to the challenge:

4

This lesson deals with learn how to pass data from the parent component to the child which is an important part of react.

You did this part correctly

But you haven’t written anything here

I would suggest looking at the example they gave you for how to use props in the child here

Here is the excerpt from the lesson

The child component then has access to the array property colors. Array methods such as join() can be used when accessing the property. const ChildComponent = (props) => <p>{props.colors.join(', ')}</p> This will join all colors array items into a comma separated string and produce: <p>green, blue, red</p> Later, we will learn about other common methods to render arrays of data in React.

Just like the example, you will do something similar in this challenge.

For better understanding on how props work, I would suggest looking at the interactive examples in the docs

5

You created a third post for the same issue so I closed that one but I’ll reply here as I can see what your issue is with the code that you posted:

return <p>{props.task.join(",")}</p>

Please check the props name…

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.