Props: how do we pass them?

Props, how do we pass them?


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!

Also, for more details, look here: React documentation.

Thanks for reading and stay tuned!

Destructuring in React - what is that?

Destructuring in React

Wondering what destructuring in React is?

It is taking a certain value out of the many other values stored together.

Or, go back to my favorite way of explaining things: comparison!

Imagine you have a basket full of eggs, and each egg has a name written on it. 

So when you want an egg, you just want this precise egg, not any egg from the basket.

Therefore, you take it out and sort it by alphabet. Every time you need a certain egg from the basket, you don't need to take out all the eggs one by one. You know exactly where to look to get

the egg with the right name!

Photo credit: someone from Pinterest

Destructuring is similar. 

It means taking a certain prop out of the basket of props so you can use it whenever you like.

For example, your prop (among others) is:

 name: 'Adam'

In case we are in a class based component, before destructuring, we will access this prop like this: this.props.name. And than we do the destructuring: 

const {name} = this.props;

and now we can use {name} every time we want to access this prop.

On the other hand, if we are in a functional component, our prop will look like this:

name: 'Adam'

and we access it like this: props.name

now destructuring in functional component will look like this:

const {name}  =  props;

Because we don't have problems with "this" keyword in functional components. This little "issue" is related to class based components only. 

Now if we are in our class based components where we want to pass props to our child component (and of course we have state), how do we do the destructuring then?

we do it like this:

const {name} = this.state; (because we are in the class that we refer to as "this". No worries, I will write more about "this" in one of my next posts.

I hope you managed to grasp the point here: getting a certain thing from a bunch of things without breaking a sweat.

Thanks for reading, stay tuned!

React for dummies: React props and state; what the heck are they?

React props and state

Now you decided to learn React, and you know what the components are by now (hopefully).

The next thing you should get familiarized with are props. Yeah right, but what are they exactly?

Well, props is short for properties: in a way you can compare it to variables in JavaScript (or some other programming language). They come in pairs that look like that: name: value.

To take it a bit further, props are like function arguments in JavaScript that we pass into the components. When we pass them to another component, we can do things we need to do with it.

But what is the state then? Well, imagine a cake made of dough and glaze. Like on the photo:

The lower brown part is name - the one that received the value. Dough is usually not particularly tasty, but you need something to carry the glaze. In our case, the glaze is the value of our props.
And what is the state in this story? State is like a pack of  all the 10 cakes in a box. You can add 2 or 6 more pieces of cake to it, or you can remove some pieces. But when you do it, you shouldn't to it directly: the original state of the cake should always be the same. Since we don't want to mess with the original state, we usually make a copy of it and do whatever we like with its copy. It's like, you don't want to test a new flu medicine on your dog, but you find some stray dog and try to see what happens. If you give it to your own dog, you could soon be a petless walker.

So how do we change state without risking the life of our pet?

We use setState() method, which changes our state by changing  the state of a copy of the genuine state. This method takes an object as an argument, and changes it as we wish / set.

We can also think of setState() as a request to update the component, to change the part of it that we want to change.

Now if you want an additional explanation on how to pass the props, check this post out!
Of course, for much more details, refer to reactjs documentation. This is just introduce those new concepts to you in a simple way, and it is up to you to take it from here!

In the next posts I will write about other basic important concepts of React. Please send questions and comments if you have any. Thanks for reading!