ReactJS Props

ReactJS Props with ReactJS Tutorial, ReactJS Introduction, ReactJS Features, ReactJS Installation, Pros and Cons of ReactJS, AngularJS vs ReactJS, Reactnative vs ReactJS, ReactJS Router, ReactJS Flux Concept, ReactJS Animations, ReactJS Discussion, ReactJS Quick Guide, etc.

<< Back to REACT

next → ← prev

React Props

Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It is similar to function arguments. Props are passed to the component in the same way as arguments passed in a function.

Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add attributes called props. These attributes are available in the component as this.props and can be used to render dynamic data in our render method.

When you need immutable data in the component, you have to add props to reactDom.render() method in the main.js file of your ReactJS project and used it inside the component in which you need. It can be explained in the below example.

Example

App.js

import React, { Component } from 'react';
class App extends React.Component {
   render() {	
      return (
          
	         Welcome to { this.props.name }   
	         
 TheDeveloperBlog is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad. 
         
          
	  );
   }
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(, document.getElementById('app'));

Output

Default Props

It is not necessary to always add props in the reactDom.render() element. You can also set default props directly on the component constructor. It can be explained in the below example.

Example

App.js

import React, { Component } from 'react';
class App extends React.Component {
   render() {	
      return (
          
              Default Props Example
	        Welcome to {this.props.name} 
	        TheDeveloperBlog is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.        
          
        );
    }
}
App.defaultProps = {
   name: "JavaTpoint"
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(, document.getElementById('app'));

Output

State and Props

It is possible to combine both state and props in your app. You can set the state in the parent component and pass it in the child component using props. It can be shown in the below example.

Example

App.js

import React, { Component } from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         name: "JavaTpoint",       
      }
   }
   render() {
      return (
         
                       
         
      );
   }
}
class JTP extends React.Component {
   render() {
      return (
          
              State & Props Example
              Welcome to {this.props.jtpProp}
              TheDeveloperBlog is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.
           
      );
   }
}
export default App;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(, document.getElementById('app'));

Output:

Next TopicReact Props Validation

← prev next →

.Net

.NET Array Dictionary List String 2D Async DataTable Dates DateTime Enum File For Foreach Format IEnumerable If IndexOf Lambda LINQ Parse Path Process Property Regex Replace Sort Split Static StringBuilder Substring Switch Tuple

Java

Core Array ArrayList HashMap String 2D Cast Character Console Deque Duplicates File For Format HashSet If IndexOf Lambda Math ParseInt Process Random Regex Replace Sort Split StringBuilder Substring Switch Vector While

TheDeveloperBlog.com

ReactJS Props

React Props

Example

Welcome to { this.props.name }

TheDeveloperBlog is one of the best Java training institute in Noida, Delhi, Gurugram, Ghaziabad and Faridabad.

Default Props

Example

Default Props Example

Welcome to {this.props.name}

State and Props

Example

State & Props Example

Welcome to {this.props.jtpProp}

Related Links:

.Net

Java

Related Links