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 components 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 inside to component in which you need.

Example

App.js

import React, { Component } from 'react';
class App extends React.Component {
   render(){
      return(
         <div>
            <h1> Welcome to { this.props.name } </h1>
            <p> <h4> HTML, CSS, Javascript and React are the technologies used to build the frontend of a website <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 = "Frontend Development" />, document.getElementById('app'));