React Js Properties

 

React Js Properties

*      Props stands for “properties”.

*      React allow us to pass information to a component using props

*      Props are immutable . so, we cannot modify the props from inside the component

*      Props are basically kind of global variable (or) object. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes.

*      We can access any prop from inside a components class using the below syntax.

this.props.propName;

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

 

class Learnreactpropsparent extends React.Component{

render(){

return <h1>Learn React in {this.props.var}</h1>

}

}

class Learnreactpropschild extends React.Component{

  render(){

    const v="English";

  return <Learnreactpropsparent var={v}/>

  }

  }

 

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Learnreactpropschild/></div>;

 root.render(element);

 

 

Output

 

Creating an Object in ReactJs Properties

 

Changes in index.js

 

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Learnreactpropsparent extends React.Component{

render(){

return <h1>Learn React {this.props.var.concept} in {this.props.var.language}</h1>

}

}

class Learnreactpropschild extends React.Component{

  render(){

    const v={topic:"React Js",language:"English",concept:"props"};

  return <Learnreactpropsparent var={v}/>

  }

  } 

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Learnreactpropschild/></div>;

root.render(element);

 

Output

 

Default Argument

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

 

class Learnreactpropsparent extends React.Component{

render(){

return <h1>Learn React {this.props.concept} in {this.props.language}</h1>

}

}

Learnreactpropsparent.defaultProps={concept:"props",language:"Tamil"}

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Learnreactpropsparent concept="Component Vs State"/></div>;

 root.render(element);

 

Output