What does render actually mean?

JavaScript
1

I’m working on the challenge: ‘React: Pass an Array as Props’

I cannot pass the last test:

The List component should render the value from the tasks prop in the p tag.

Which makes it clear that I don’t really understand what the term ‘render’ means in this context. I have tried to use the keyword render in the ‘List’ component. That only made the entire thing stop working.

Code below.

  { /* 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 ", " workout"]} />
        <h2>Tomorrow</h2>
        <List tasks={["What do you want to do tonight, Brain? " , " The same thing we do every night, Pinky ", " Try to take over The World."]} />        
        { /* change code above this line */ }
      </div>
    );
  }
};```

And Thanks!
2

You’re super close! Let’s look at the instructions one last time.

Use join(", ") to display the props.tasks array

Make sure you are following the syntax exactly. See if you can find what the solution to your issue is with what I’ve provided. You’re super close to getting this.

1 Like
3

The word “render” is most often used in the context of graphics (2D and 3D) and means creating something visual from the abstract. A “render” in that context refers to the creation of an individual frame on the screen - and many frames comprise a video or animation.

However, in the context of React, “render” more typically means taking the JSX template of a component and displaying it on screen, since the template specifies the “visual” part of the component. You can kinda think of it like “render this component specified by this template” which basically means to put it on the screen in a specific location.

1 Like
4

Yep. That did it.

Thank you both for your very helpful answers.

1 Like