How props in React work

JavaScript
1

Tell us what’s happening:
Hi guys I am new to react props.

I am here working with props challenge giving by React which I have completed and was correct. but I am not sure how does the code is being executed and where does the props being rendered. I have a feel the props is being rendered in ‘ToDo’ class component, anyone have any explanation ?

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= {["code","gym","study"]}/>
      <h2>Tomorrow</h2>
      <List tasks= {["code","run","sleep"]}/>
      { /* 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/79.0.3945.130 Safari/537.36.

Challenge: Pass an Array as Props

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

2

So Todo is a React component that is getting injected into the DOM somewhere. When React renders this, it encounters things it knows are nested components, the List component. The capitalization is kind of a giveaway.

Now that List component has been given one addition, the tasks attribute. Within the Todo, we can see that the List is being given an array of values for the tasks attribute. But within the List component, what we are used to calling attributes in our HTML are seen as props. props are those values passed into our component as attributes. We could always add more attributes, and in doing so, we’d have more props - props is an object, with eacy attribute name as the property name in that props.

So, as we’ve set a tasks attribute on the List tag, we have a props.tasks on our object inside our component. We can do whatever we like to that. For this task, we simply render out a comma-delimited version of that array.