Props in React 😱 😰
I just started the first week of module 4 in flatiron school, where we are learning about React, one of the first concepts that appeared was properties (props), I decided to write this blog about it, because at the beginning it was a bit confusing for me and because I find it interesting. The intention of this blog is basically to define and give some examples of what we could do with props.
The properties are the main mechanism of React JS to pass data from a parent component to a child component, with a simple syntax we can make the components more customizable.
For example: a component that greets the user when entering a page:
To access the property name we use the syntax this.props.nombre, the parent component must provide this property, and in case it does not, its value is undefined and will not be displayed on the page. In this way we can reuse this component and change the value of the name.
The components receive the number of properties that we want, it is only necessary to add them when defining the component and besides serving as information to build it, the properties are commonly used as values to define styles.
In this example we pass the titulo and subtitulo properties to the Header component and add a color for the text with the color property (note how styles can be declared as JavaScript objects).
Transferring multiple properties.
Transferring properties individually can be complicated and it can bring errors when a component receives many properties. To understand this, let’s first see how the destructuring assignment syntax works:
This syntax is used to extract variables from an object or an array, individually or together, when defining … otras are specifying, that those variables that were not previously extracted will be stored there.
Applying this concept we can pass multiple properties to a component:
This works very well when a component receives several properties, it must consume some and pass the others to another child component. The only condition is that the names of the properties match, if they do not match it will be necessary to extract them one by one and pass them separately.
Props should not change.
In React there are two types of data storage, state and props, state is the internal information that a component defines and can update, every time the state is updated a re-render occurs, which means the component is shown again in the application.
On the other hand the properties are external information used to define various aspects of the component and we must always keep in mind that a component can not change its properties,
Always remember: do not modify the properties of a component, modify its state.
But then how do we modify the data of a component? It is the responsibility of the father to pass the new data of the component, when these change the child component it is refreshed and reloaded with the new properties.
The props are a vital part of the development in React, used effectively they allow to create highly reusable and customizable components, each component can receive the number of properties that need.
