React - Pass an Array as Props

Tell us what’s happening:
Describe your issue in detail here.
I do not understand why my code is not running. It says it is unable to use the array function join(). 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 = {["walk dog", "cycling"]} />
         }
        <List/>
        <h2>Tomorrow</h2>
        <List/>
        { /* Change code above this line */
        <List tasks = {["workout", "planning", "grocery shopping"]} />
         }
      </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

Challenge: React - Pass an Array as Props

Link to the challenge:

Hi there and welcome to our community!

The join() method won’t work if it has nothing to join.
If you note the console errors you get when the code runs, you’ll see that it’s trying to join something which is undefined.

When this renders, it’s looking for props.tasks… but there’s nothing there.

It makes more sense if you just think of components as functions.

You call the function and pass it arguments (prop values) and inside the function you use the props (parameters).

In your code, you call the function and pass it an argument, then you call the function without arguments. Inside the function (the component) you are relying on the parameters to have a value (the arguments) so when you use the parameter but it is undefined you get an exception.

This is a “function” (component) called with arguments:

<List tasks = {["walk dog", "cycling"]} />

This is a “function” (component) called without arguments:

<List />

As a plain function:

function joinList(list) {
  return list.join(',')
}


joinList(["walk dog", "cycling"]); // 'walk dog,cycling'
joinList(); // TypeError: Cannot read properties of undefined (reading 'join')

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