props in react

Have you ever wondered why React components are treated like Javascript functions?

Do not worry too much, It is the Props system that allows us to treat Components in React just like Javascript functions.

Props allow React to maintain its one-way data flow, This means data can only be passed from top to bottom and not the other way around.

Prerequisite

Basic understanding of React components
Node.js v16 or greater installed
A code editor (I’ll be using VS code)
A personal Computer or Laptop

What are Props?

Props also known as Properties.

Props are tools that React uses to pass data from parent to child elements.

We can think of Props as a parameter in Javascript functions. We can change the value of this parameter but the set of instructions to be executed remains the same.

Props are the optional input that your component can accept.

Props are objects that contain the attribute and value which has been passed by the parent component.

Example

<Greet name=” Felix” />

Creating Components

After creating our React application with this command; npx create-react-app how-to-use-props-in-react

I’ll be creating a components folder in the src folder, the components folder will create Greet.js file and Welcome.js file.

For this article, I’ll be making use of three files, which are App.js,

Greet.js and Welcome.js.

Code snippets

Greet.js

import React from 'react';

const Greet = () => <h1>Hello Felix</h1>
export default Greet;

Welcome.js

import React, { Component } from 'react';

class Welcome extends Component {
 render() {
  return <h1>Welcome Felix</h1>
}
}
export default Welcome;

App.js

import React, { Component } from 'react';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome

class App extends Component {
 render() {
  return(
    <div className='App' >
     <Greet />
     <Greet />
     <Greet />
    {/* <Welcome /> */} 
 </div>
)
}
}
export default App;

From the files above, we can see the Greet.js file is used as a function component while the Welcome.js file is used as a class component.

Then let’s look at the App.js file, you can see I imported both the Greet.js and Welcome.js files, but Welcome.js was commented out of the JSX of the App.js.

Here is what the output is when you run npm start on your terminal.

Output

Adding Props

When adding Props, we use attributes and values.

An example of an attribute can be a name while the value of that particular attribute is the name the person is called e.g. Felix

Props are like objects and whatever we pass as an attribute in the component is called in the parent.

Code snippets

Greet.js

import React from 'react';

const Greet = props => {
console.log(props)
 return <h1>Hello {props.name} </h1>
}
export default Greet;

App.js

import React, { Component } from 'react';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome

class App extends Component {
 render() {
  return(
    <div className='App' >
     <Greet name="Felix" />
     <Greet name="Joshua" />
     <Greet name="Wayne" />
    {/* <Welcome /> */} 
 </div>
)
}
}
export default App;

Output

Adding the second Prop

To add a second Prop in React component, you simply pass another attribute (another property and value) when using the component in your code.

Code snippets

App.js

import React, { Component } from 'react';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome

class App extends Component {
 render() {
  return(
    <div className='App' >
     <Greet name="Felix" nickName="Flexzy" />
     <Greet name="Joshua" nickName="Josh" />
     <Greet name="Wayne" nickName="Wazza" />
    {/* <Welcome /> */} 
 </div>
)
}
}
export default App;

Greet.js

import React from 'react';

const Greet = props => {
console.log(props)
 return <h1>Hello {props.name} , Friends call you {props.nickName} </h1>
}
export default Greet;

Output

Props with class components

When using class components in React, you can access the props inside the component by referring to this.props.

Props are read-only, which means they cannot be modified within the component.

Code snippets

App.js

import React, { Component } from 'react';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome

class App extends Component {
 render() {
  return(
    <div className='App' >
     <Greet name="Felix" nickName="Flexzy" />
     <Greet name="Joshua" nickName="Josh" />
     <Greet name="Wayne" nickName="Wazza" />
     <Welcome name="Felix" nickName="Flexzy" /> 
     <Welcome name="Joshua" nickName="Josh" />
     <Welcome name="Wayne" nickName="Wazza" /> 
 </div>
)
}
}
export default App;

Welcome.js

import React, { Component } from 'react';

class Welcome extends Component {
 render() {
  return <h1>Welcome {this.props.name}, Friends call you {this.props.nickName} </h1>
}
}
export default Welcome;

Output

Props being Immutable

In React, Props are immutable, which means that their values cannot be changed or modified within the component that receives them. Once Props are passed to a component, their values remain the same throughout the component’s lifecycle.

Immutability is an important principle in React’s design because it helps ensure the predictability and maintainability of your application.

Code snippet

Greet.js

import React from 'react';

const Greet = props => {
console.log(props)
props.name ="John"
 return <h1>Hello {props.name} , Friends call you {props.nickName} </h1>
}
export default Greet;

Output

Conclusion

Props play a crucial role in React and are used to pass data from parent components to child components. In this article, you have learned how to use Props in a function component and also in a class component.

Props facilitate communication between different parts of your application and allow you to create dynamic and reusable components.

In case you want additional information and resources, you can check online.

Beginners’ Guide on how to use Props in React.js