Help with passing props in single page app example

Help with passing props in single page app example
0

#1

Tell us what’s happening:
I’m used to working with props coming from a Master Component. Can someone guide me on the proper way to define: this.props.tasks or props.tasks in the code snippet below

Your code so far


const List= (tasks) => {
  { /* change code below this line */ }
  return <p>{props.tasks.join(', ')}</p>
  { /* change code above this line */ }
};

class ToDo extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>To Do Lists</h1>
        <h2>Today</h2>
        { /* change code below this line */ }
        <List tasks={["walk the dog", "workout", "call Wifey"]} />
        <h2>Tomorrow</h2>
        <List tasks={["honeyDo", "honeyPleaseDo", "honeyDoItNow"]} />
        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/pass-an-array-as-props


#2

Your code passes the tests. Try refreshing your page and running the tests again.


#3

It looks like I’m still getting props undefined error when I refresh/re-run


#4

Thanks @randelldawson. Just changed (tasks) to (props) and all is well. THANKS!


#5

Sorry about that. For some reason, I thought I tested it, but I guess I did not. I see the same error now.

The reason it exists is because your parameter name is tasks. The argument passed represents the props object. You reference props.task.join in the return statement, so you should either rename your parameter from tasks to props or change props.tasks.join to tasks.tasks.join.

EDIT: FYI - since the argument passed to List is an object, you could used object destructuring in the function parameter part to create a tasks variable directly and call the join method on it like:

const List= ({tasks}) => {
  { /* change code below this line */ }
  return <p>{tasks.join(', ')}</p>
  { /* change code above this line */ }
};