React Props
React Props
A prop is an abbreviation of ‘properties.' State and props are mainly different from each other because props are immutable. Props are the read-only components. It is the object that stores the attribute value of a tag, and its work is similar to the HTML elements. It helps to pass data from one component to another components. Props are like function arguments, as props are passed to the component in a similar way as arguments passed in the function.
We cannot modify the props inside the component. We can add attributes called props inside the components. These attributes are available in the component as this.props and use for rendering the dynamic data in our render method.
When you require immutable data in the component, you need to add the reactDom.render() method in the main.js file of the ReactJS project and use that file inside the component in which you need it.
For example:
App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h2>Hello {this.props.name}</h2>
<p>This is tutorialandexample.com website which provides you a lot of tutorials.</p>
</div>
);
}
}
export default App;
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));
Output:
Default Props
It is not mandatory to always add props in the reactDom.render() element. You can also set default props directly on the component constructor. It is clearly explained in the following example:
Example:
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h2>Hello World</h2>
<h2>Default Props Example</h2>
<p>Welcome to {this.props.name}</p>
<p>tutorialandexample.com provides you one of the best tutorials.</p>
</div>
);
}
}
App.defaultProps = {
name: "tutorialandexample.com"
};
export default App;
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));
Output:
State and Props
State and props both can be combined in the app. You can set the state in the parent component and pass it to the child component using props.
For example:
App.js
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = {
name: "tutorialandexample.com",
};
}
render() {
return (
<div>
<Tutorial tutorialProp={this.state.name} />
</div>
);
}
}
class Tutorial extends Component {
render() {
return (
<div>
<h2>State & Props Example</h2>
<p>Welcome to {this.props.tutorialProp}</p>
<p>tutorialandexample.com provides you one of the best tutorials.</p>
</div>
);
}
}
export default App;
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app'));
Output:
