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
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>{ this.props.name } is the greatest learning platform </h1>
<p> <h4> Where you can find quality educational resources for the cutting-edge technologies </h4> </p>
</div>
);
}
}
export default App;
Main.Js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App name = "Jquery AZ!" />, document.getElementById('root'));
Output:
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:
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1>how to add Default Props</h1>
<h3>Welcome to {this.props.name}</h3>
<p>JQuery AZ is one of the prominent platform to learn cutting-edge Javascript library ReactJS</p>
</div>
);
}
}
App.defaultProps = {
name: "JQuery AZ"
}
export default App;
Output:
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
import React, { Component } from 'react';
class App extends React. Component {
constructor(props) {
super(props);
this.state = {
name: "JQuery AZ",
}
}
render() {
return (
<div>
<JQuery = {this.state.name}/>
</div>
);
}
}
class JTP extends React.Component {
render() {
return (
<div>
<h1>Passing Data from the parent to a child component with props</h1>
<h3>Welcome to {this.props.jQuery}</h3>
<p>Jquery AZ is the best learning platform to deepen your understanding on the front-end libraries and frameworks.</p>
</div>
);
}
}
export default App;
Main.JS
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App/>, document.getElementById('app'));
Output:
