React - Pass an Array as Props

JavaScript
1

Tell us what’s happening:

I have a problem. When I type the code in, it normally works, but when I type the word ‘join’ which is required for the code, the tests suddenly shows an error. I really don’t know why, I should be passing at least 3 of them, but it appears, that I failed every single one. Please help.

Your code so far

const List = (props) => {
  { /* 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={['go out with a dog, play on PC, programme at freecodecamp.org']}/>
        <h2>Tomorrow</h2>
        <List />
        { /* Change code above this line */ }
      </div>
    );
  }
};

Your browser information:

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

Challenge Information:

React - Pass an Array as Props

2

try to write an array of strings, not a single string

1 Like
3

Still doesn’t work. But I’m now getting a different error in the test console:
[TypeError: Cannot read properties of undefined (reading 'join')]

4

That means you’re not passing anything, it’s trying to run the array join method on undefined. What have you changed it to?

5

I just slightly edited the code.

const List = (props) => {
  { /* 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={['go out with a dog',' play on PC',' learn react']}/>
        <h2>Tomorrow</h2>
        <List />
        { /* Change code above this line */ }
      </div>
    );
  }
};
6

You’ve put a child element in <List>

<List tasks={[...]}>
  <h2>Tomorrow</h2>
</List>

It doesn’t accept any children, it’s just <List tasks={[...]} />

Edit: apologies, I misread <List/> as </List>: what @ilenia says, you’ve told the app to render a second List component but not passed it any tasks

7

you have not passed any props to this one, so when it tries to do {props.tasks.join(', ')} it doesn’t have anything to do as props.tasks is undefined

2 Likes
8

Oh, thank you! It worked!