Hey people, it's me again. This time I am trying to share some tips on passing the props in React.
Last time I wrote about props and what they are (more precisely here).
Now I want to write about passing them (or sending them). Let's dive in!
Props can be passed only from parent to child component, so it is all about the vertical flow.
Now I hope by now you realized how much I like comparisons...Comparisons make things easy to grasp, that is why I use them so much..
Imagine this like passing genetic information from mother to a child. Child cannot pass her/his mother any genetic information to their mum (or say just 'parent' to be politically correct). A child cannot pass genetic information to his sister or brother, either. It's always vertical - just like props!
We have talked about functional and class based components. So let's put the story into perspective.
First, we make a functional (child) component, for example. We destructure the name of those props and set it equal to this.props. You can learn more about destructuring here.
In this way, props have no value but are destructured so they can receive value from the parent component. Then, we can render props within the functional/ child component in the form we prefer to do that. Afterwards, in the parent component we import the functional component, set the state containing the value of the props we want to pass to the child (our functional) component.
We destructure the this.state (we set the {name} equal to this.state and in the render, we insert our functional / child component and assign the props from this.state to the component, and render it. The next step is for you to open the Visual Studio Code, or any other text editor you may be using for writing your code, and try to do this thing I just talked about. We can talk, read and write all we want, but until we do it ourselves, we will never learn!
Thanks for reading and stay tuned!
No comments:
Post a Comment