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. Prop is 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. Inside the components, we can add an attribute called props. 

Props in functional component

	import React from 'react'
	const Greet = (props) => {
	console.log(props)
	return (
	<div>
	<h1>Hello {props.name} a.k.a {props.heroName} </h1>
	{props.children}
	</div>
	)
	}
	export default Greet

view raw Greet.js hosted with ❤ by GitHub

	import React, { Component } from 'react';
	Import Greet from ‘./Greet
	class App extends Component{
	render(){
	return(
	<div>
	<Greet name="Bruce" heroName="Batman">
	<p>This is a children props</p>
	</Greet>
	<Greet name="Clark" heroName="Superman"/>
	<Greet name="Diana" heroName="Wonder woman"/>
	</div>
	);
	}
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

Props in class component

These attributes are available in the component as this.props and can be used to render dynamic data in our render method.

	import React from 'react'
	class Welcome extends Component {
	render() {
	console.log(this.props)
	return <h1>Welcome {this.props.name} a.k.a {this.props.heroName}</h1>
	}
	}
	export default Welcome

view raw Welcome.js hosted with ❤ by GitHub

	import React, { Component } from 'react';
	Import Welcome from ‘./Welcome
	class App extends Component{
	render(){
	return(
	<div>
	<Welcome name="Bruce" heroName="Batman"/>
	<Welcome name="Clark" heroName="Superman"/>
	<Welcome name="Diana" heroName="Wonder woman"/>
	</div>
	);
	}
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

Passing object as props

	import React, { Component } from 'react'
	import Car from './Car'
	class Garage extends Component {
	render() {
	const carinfo = {name: "Ford", model: "Mustang"}
	return (
	<div>
	<h1>Who lives in my garage?</h1>
	<Car brand={carinfo}/>
	</div>
	)
	}
	}
	export default Garage

view raw Garage.js hosted with ❤ by GitHub

	import React, { Component } from 'react'
	class Car extends Component {
	render() {
	return (
	<div>
	<h2>I am a {this.props.brand.model}!</h2>
	</div>
	)
	}
	}
	export default Car

view raw Car.js hosted with ❤ by GitHub

Since Props are immutable, we cannot modify the props from inside the component. Then how do we maintain component data that may

change over time. We can achieve this using state.

Destructuring Props

It makes it possible to unpack the values from arrays or properties from objects into distinct variables.

Class component

	import React, { Component } from 'react';
	class Welcome extends Component {
	render() {
	const {name, heroName} = this.props
	return <h1>Welcome {name} a.k.a {heroName}</h1>
	}
	}
	export default Welcome

view raw Welcome.js hosted with ❤ by GitHub

	import React, { Component } from 'react';
	Import Welcome from ‘./Welcome
	class App extends Component{
	render(){
	return(
	<div>
	<Welcome name="Bruce" heroName="Batman"/>
	<Welcome name="Clark" heroName="Superman"/>
	<Welcome name="Diana" heroName="Wonder woman"/>
	</div>
	);
	}
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

Functional component

	// Destructuring in the parameter
	const Greet = ({name, heroName}) => {
	return (
	<div>
	<h1>Hello {name} a.k.a {heroName} </h1>
	</div>
	)
	}
	// Destructuring in the function body
	const Greet = (props) => {
	const {name, heroName} = props
	return (
	<div>
	<h1>Hello {name} a.k.a {heroName} </h1>
	</div>
	)
	}
	export default Greet

view raw Greet.js hosted with ❤ by GitHub

	import React, { Component } from 'react';
	Import Greet from ‘./Greet
	class App extends Component{
	render(){
	return(
	<div>
	<Greet name="Bruce" heroName="Batman">
	<p>This is a children props</p>
	</Greet>
	<Greet name="Clark" heroName="Superman"/>
	<Greet name="Diana" heroName="Wonder woman"/>
	</div>
	);
	}
	}
	export default App;

view raw App.js hosted with ❤ by GitHub