Hit enter after type your search item

A Little About React Props 

Props are abbreviated as properties in ReactJS. Technically, they are the read-only components of JavaScript. Props stores the value of the attribute, we passed to a tag. Its working procedure is pretty much similar to the HTML.

With an aid of Props, the exchange of data from parent to child or from child to a parent component takes place. Therefore, it is quite evident without props we can’t send data from one component to another.

To keep that in perspective what props are and how do they work, let’s take an analogy of simple JavaScript function. We pass an argument to a function and this argument is received and stored in a variable. Props work in the same way.

The immutability of props can be gauged from a fact that once props are passed to a component they cannot be modified later. Within the components, we can incorporate a host of attributes called props. These attributes are readily available to our JavaScript components. Unleashing this.props command, we can access dynamic data in our render() method.

Whenever you need to incorporate immutable data in your React component, you must have to add the method ReactDOM.render() in the main.js file of your main ReactJS project. Afterward, you can use it inside any component you want.

This concept can be better understood from this code example:

An example of Props

App.js


Main.Js

Output:

ReactJS props 1

Default Props

It is not mandatory to always incorporate props in the ReactDOM.render() element. You can also embed default props directly on the component constructor.

Try to grasp this concept with this code example:


Output:

ReactJS props default

State and Props

You can merge both state and props in your simple ReactJS app. Through this method, an exchange of data can occur from the parent component to a child component.

To do so, you need to set the state in the parent component and pass it to the child component with the help of props. This method is illustrated in the following code:

App.JS


Main.JS

Output:

ReactJS props state

This div height required for enabling the sticky sidebar