Props in ReactJS

React Props
Props or “Properties” are read-only components, that gives a way to pass data from one component to other components. It stores the value of attributes of a tag. It is an immutable object that works similarly to the HTML attributes. The props cannot be modified from inside the component as they are immutable. But we can add attributes called props, inside the components. The props are thus used to add immutable data in the component. The props are used inside the component but are added to the reactDom.render() method in the main.js file.

Example:
App.js:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<h2> Hello { this.props.msg } </h2>
<p> Have a Great day. </p>
</div>
);
}
}
export default App;
import React, { Component } from 'react'; class App extends React.Component { render() { return ( <div> <h2> Hello { this.props.msg } </h2> <p> Have a Great day. </p> </div> ); } } export default App;
import React, { Component } from 'react';  
class App extends React.Component {  
render() {     
return (  

Hello { this.props.msg }

Have a Great day.

); } } export default App;

Main.js:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<app msg="World!">, document.getElementById('app'));
</app>
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<app msg="World!">, document.getElementById('app')); </app>
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
ReactDOM.render(, document.getElementById('app')); 

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Hello World!
Have a Great day.
Hello World! Have a Great day.
Hello World!
Have a Great day.

Default Props:
We can also set default props directly on the component constructor.

Example:
App.js:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<h2> Hello { this.props.msg } </h2>
<p> Have a Great day. </p>
</div>
);
}
}
App.defaultProps = {
msg: "World!"
}
export default App;
import React, { Component } from 'react'; class App extends React.Component { render() { return ( <div> <h2> Hello { this.props.msg } </h2> <p> Have a Great day. </p> </div> ); } } App.defaultProps = { msg: "World!" } export default App;
import React, { Component } from 'react';  
class App extends React.Component {  
render() {     
return (  

Hello { this.props.msg }

Have a Great day.

); } } App.defaultProps = { msg: "World!" } export default App;

Main.js:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<app>, document.getElementById('app'));
</app>
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<app>, document.getElementById('app')); </app>
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
ReactDOM.render(, document.getElementById('app'));  

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Hello World!
Have a Great day.
Hello World! Have a Great day.
Hello World!
Have a Great day.

Combining State and Props Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import React, { Component } from 'react';
class App extends React.Component {
constructor() {
super();
this.state = {
data:
[ {
"name":"Dhoni"
},
{
"name":"Kohli"
},
{
"name":"Pandya"
} ]
}
}
render() {
return (
<div>
<playername>
<ul>
{this.state.data.map((item) => <list data="{item}">)}
</list></ul>
</playername></div>
);
}
}
class PLAYERname extends React.Component {
render() {
return (
<div>
<h1>Player Names</h1>
</div>
);
}
}
class List extends React.Component {
render() {
return (
<ul>
<li>{this.props.data.name}</li>
</ul>
);
}
}
export default App;
import React, { Component } from 'react'; class App extends React.Component { constructor() { super(); this.state = { data: [ { "name":"Dhoni" }, { "name":"Kohli" }, { "name":"Pandya" } ] } } render() { return ( <div> <playername> <ul> {this.state.data.map((item) => <list data="{item}">)} </list></ul> </playername></div> ); } } class PLAYERname extends React.Component { render() { return ( <div> <h1>Player Names</h1> </div> ); } } class List extends React.Component { render() { return ( <ul> <li>{this.props.data.name}</li> </ul> ); } } export default App;
import React, { Component } from 'react';  
class App extends React.Component {  
constructor() {  
super();  
this.state = {  
data:   
[  {             
"name":"Dhoni"             
},  
{            
"name":"Kohli"             
},  
{    
"name":"Pandya"          
}  ]  
}  
}  
render() {  
return (  
    {this.state.data.map((item) => )}
); } } class PLAYERname extends React.Component { render() { return (

Player Names

); } } class List extends React.Component { render() { return (
  • {this.props.data.name}
); } } export default App;

Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Player Names
● Dhoni
● Kohli
● Pandya
Player Names ● Dhoni ● Kohli ● Pandya
Player Names
      ●	Dhoni
      ●	Kohli
      ●	Pandya