Understanding “Props” in React

Props — Just like we pass arguments in functions, we can pass in data to a component as props.

Why use Props?

Most people start React by building static pages (Always display the same thing). We want to be able to pass data from outside of the component and make the component dynamic.

  • The most important thing to understand about props is that they are immutable. In other words, props are read only data. You should not be trying to change the value of a prop. To make dynamic content that can change based on input, we will be exploring State.
  • Note that props is whatever that is passed to ReactDOM.render(). Also note that ReactDOM.render() can be in another file. So we can pass props from anywhere.

2. How Props work

  • I have put together a diagram below to help you visualize how props work.
Diagram for understanding props
  • This is the result
How it is rendered on the view

I hope this cleared everything up for you. I will be making a similar styled post regarding State. Stay tuned! Please let me know if you spot any errors, I will fix them accordingly.