React Function Component with Props

by

In react JS, Props are values passed from a parent function component to a child function component. The child component is included within the JSX of the parent component and receives these values as attributes.

Previous Topic – React Function Component

You can pass props to function components in many ways but I will explain here only possible causes for passing props to the function components that will be very easy to understand.

Ways to use Function Component with Props

Now, I’ll help you understand essential props concepts one by one with simple examples, making you confident in using function components with props.

1. Single Basic Prop

As you know we pass a single attribute to the html element like –

<p id="para">Some Text</p>

We can also pass a single prop as an attribute & value to the function component

Pass Props

To pass props, create a parent function component named Developer and import and return another child component named DeveloperProfile by passing a single prop named fullName the value “Rapsan Jani”.

File Name – Developer.js

import DeveloperProfile from './DeveloperProfile';
function Developer() {
    return (
        <DeveloperProfile fullName = "Rapsan Jani" />
    );
} 
export default Developer;

Access Props

To access props, create a function component named DeveloperProfile with a single argument props and access the value of prop ‘fullName’ within h3 using props.fullName

File Name – DeveloperProfile.js

function DeveloperProfile(props) {
 
   return <h3>{props.fullName}</h3>
   
}

export default DeveloperProfile;

2. Multiple Basic Props

As you know we pass multiple attributes to the html element by separating them with a single white space like –

<p id="param" title="text info">Some text</p>

We can also pass multiple props as attributes & values to the function component

Pass Props

To pass multiple basic props, Create a function component called Developer and import & return another component called DeveloperProfile and passes it two props:

  • fullName with the value “Rafsan Jani” 
  • position with the value “Software Developer.”

File Name – Developer.js

import DeveloperProfile from './DeveloperProfile';
function Developer() {
    return (
        <DeveloperProfile fullName="Rafsan Jani" position="Software Developer" />
    );
} 
export default Developer;

Access Prop

To access multiple basic props, Create a function component called DeveloperProfile that expects certain properties (fullName and position) to be passed in as props.

Return and access these properties within an HTML structure, displaying the fullName as an h3 heading and the position as a p paragraph.

File Name – DeveloperProfile.js

function DeveloperProfile(props) { 
   return(
      <div>
       <h3>{props.fullName}</h3>
       <p>{props.position}<p>
      </div>
   ); 
} 
export default DeveloperProfile;

3. Single Variable as Prop

You can pass a single variable as a single prop.

Pass Prop

To pass a single variable as a prop, create a Developer component and declare a fullName constant, renders with value ‘Rafsan Jani’. After that, import & return DeveloperProfile by passing the fullName variable with the property ‘fullName‘

File Name – Developer.js

import DeveloperProfile from './DeveloperProfile';
function Developer() {
     cons fullName = "Rafsan Jani"
    return (
        <DeveloperProfile fullName = {fullName} />
    );
} 
export default Developer;

Note – child component DeveloperProfile.js already passed to step-1: Single Basic Prop

4. Multiple Variable Props

You can pass multiple variables with multiple props by including them as separate attributes in the JSX.

pass props

To pass multiple variable props, create a function component Developer and declare two const variables fullName & position with values “Rafsan Jani” & “Software Developer” respectively.

After that import & return another component DeveloperProfile by passing fullName & position variable with the same name properties.

File Name – Developer.js

import DeveloperProfile from './DeveloperProfile'; 
function Developer() { 
    const fullName = "Rafsan Jani"; 
    const position = "Software Developer"; 
   return (
         <DeveloperProfile
           fullName = {fullName}
           position = {position} />
   ); 
} 
export default Developer;

Note – child component DeveloperProfile.js already passed to the step-2: Multiple Basic Prop

5. Destructuring Props

You can destructure props directly in the child component’s function parameters for easier access.

Access Props

You can directly define a child function component DeveloperProfile with arguments inside curly {} brackets.

These argument names must be similar to the property names that are passed from the parent component. Also, each argument must be separated by a comma

File Name – DeveloperProfile.js

function DeveloperProfile({fullName, position}) { 
   return(
      <div>
       <h3>{fullName}</h3>
       <p>{position}<p>
      </div>
   ); 
} 
export default DeveloperProfile;

Object as Props

You can pass an object as a props 

import React from 'react';
import DeveloperProfile from './DeveloperProfile';

function Developer() {
  const developerData = {
    name: 'John Doe',
    title: 'Front-end Developer',
    skills: ['React', 'JavaScript', 'HTML', 'CSS'],
  };

  return (
    <div>
      <h1>Developer Profile</h1>
      <DeveloperProfile data={developerData} />
    </div>
  );
}

export default Developer;

6. Default Props

You can set default values for props in case they are not provided by the parent component.

File Name – DeveloperProfile.js

function DeveloperProfile({ fullName = 'Guest', position = 'Fresher' }) { 
   return(
      <div>
       <h3>{fullName}</h3>
       <p>{position}<p>
      </div>
   ); 
} 
export default DeveloperProfile;

7. Functions as Props

You can pass functions as props to allow child components to communicate with the parent or trigger actions.

Access Props

This code imports React and defines a component that displays a count and a button, but it lacks the handleLike function necessary for button functionality. Once the missing function is implemented, the component can be used to display and interact with the count value.

File Name – DeveloperProfile.js

import React from 'react';

function DeveloperProfile({ like, handleLike }) {
  return (
    <div>
      <p>Count: {like}</p>
      <button onClick={handleLike}>Like</button>
    </div>
  );
}

export default DeveloperProfile;

Pass Props

This updated code imports React and the useState hook defines a Developer component that manages a like state variable, implements a handleLike function to update the like, and renders the DeveloperProfile component with the like and the handleLike function as props

File Name – Developer.js

import React, { useState } from 'react';
import DeveloperProfile from './DeveloperProfile';

function Developer() {
  const [like, setLike] = useState(0);

  const handleLike = () => {
    setLike(like + 1);
  };
  
  return (
    <div>
      <DeveloperProfile like={like} handleLike={handleLike} />
    </div>
  );
}

export default Developer

 

6. Component as Props

As you know an HTML element can be kept inside another parent element.

<div>
 <img src="" />
</div>

Like this, You can also keep a child function component inside another one.

Pass Props

You can pass <DeveloperComponent />  to the <Profile></Profile> component with its props.

File Name – Developer.js

import DeveloperProfile from './DeveloperProfile'; 
import Profile from './Profile';
function Developer() { 
    const fullName = "Rafsan Jani"; 
    const position = "Software Developer"; 
   return (
        <>
        <Profile>
         <DeveloperProfile
           fullName = {fullName}
           position = {position} />
         </Profile>
       </>
   ); 
} 
export default Developer;

Access Props

Now you can access props values in the ‘DeveloperProfile’ component.

File Name – DeveloperProfile.js

function DeveloperProfile(props) { 
   return(
      <div>
       <h3>{props.fullName}</h3>
       <p>{props.position}<p>
      </div>
   ); 
} 
export default DeveloperProfile;

Access children

You can access the passed ‘DeveloperProfile’ component as via {children} 

File Name – Profile.js

export default function Profile({ children }) {
  return (
    <div className="profile">
      {children}
    </div>
  );
}

7. Props with Spread Operator

When you have an object with props and want to pass them to a child component, you can use the spread operator (...) to pass all properties of the object as individual props.

File Name – Developer.js

import React from 'react';
import DeveloperProfile from './DeveloperProfile';

function Developer() {
  const developerInfo = { 
           fullName: 'Rapsan jani', 
           position: 'Software Developer', 
           gender='male' 
   };
  
  return (
    <div>
      <DeveloperProfile {...developerInfo} />
    </div>
  );
}
export default Developer;

 

How to use Function Components with props

You can pass parameters into a function component by using Reac props. Props allow you to send data from a parent component to a child component. This data can then be accessed within the child component’s function body.

Now, Let’s see the following using React App to use the function component with props

Note – Before getting started, ensure you have already set up a React app project.

1. Create a New File

Create two new files inside the src folder with the name ‘DeveloperProfile.js’ and ‘Developer.js’

2. Acess Props 

This code defines a React functional component called DeveloperProfile. It receives four props: fullName, position, count, and like, and uses these props to display developer information, a count value, and a “Like” button.

However, it still lacks the handleLike function, which should be defined elsewhere for the button to function properly.

File Name – DeveloperProfile.js

import React from 'react';

function DeveloperProfile({ fullName, position, like, handleLike }) {
  return (
    <div>
       <h3>{fullName}</h3>
       <p>{position}<p>
      <p>Count: {like}</p>
      <button onClick={handleLike}>Like</button>
    </div>
  );
}

export default DeveloperProfile;

3. Pass Props

This code imports React and the useState hook, defines a Developer component that manages a like state variable, and stores developer information in an object.

It also implements a handleLike function to update the count.

The DeveloperProfile component is rendered with developer information, like, and the handleLike function as props, allowing it to display the information and interact with the like value.

File Name – Developer.js

import React, { useState } from 'react';
import DeveloperProfile from './DeveloperProfile';

function Developer() {
  const [like, setLike] = useState(0);
  const developerInfo = { 
           fullName: 'Rapsan jani', 
           position: 'Software Developer', 
           gender='male' 
   };

  const handleLike = () => {
    setLike(like + 1);
  };
  
  return (
    <div>
      <DeveloperProfile {...developerInfo} like={like} handleLike={handleLike} />
    </div>
  );
}

export default Developer
  • Import the `DeveloperProfile` component from the ‘./DeveloperProfile‘ file.
  • Define a React functional component named `Developer`.
  • Inside the `Developer` component, declare a state variable `count` and a function `setCount` using the `useState` hook, initializing `count` to 0.
  • Create an object named `developerInfo` containing information about the developer, including `fullName`, `position`, and `gender`.
  • Implement a `handleLike` function that updates the `count` state when called, incrementing it by 1.
  • In the component’s JSX code, create a `<div>` element to structure the content.
  • Within the `<div>`, render the `DeveloperProfile` component and pass it to the `developerInfo` object using the spread operator to pass all properties of the object as individual props. Also, pass `count` and `handleLike` as props to `DeveloperProfile`.
  • Export the `Developer` component as the default export of the module.

4. Use the Function component

Now, import your function component ‘Developer’ in the root component App.

File Name – App.js

import React from 'react';
import Developer from './Developer';

function App() {
  return (
      <Developer />
  );
}

export default App;

5. Run React App 

To see the result in a web browser, first run the following command in your terminal.

npm start

After that, open the following URL in your web browser to see the result

http://localhost:3000/

Points to memorize

To use props with function components, you should keep the following points in your  mind.

Point-1: You can pass text as props

<ChildComponent propertyName1="value" propertyName2="value2" />

Point-2: You can pass variables as props

<ChildComponent propertyName1={variableName1} propertyName2={variableName2} />

Point-3: You can pass an object as a prop with the spread operator

<ChildComponent propertyName={...objectVariableName}  />

Point-4: You can access the values of props using the props object

function ChildComponent(props) { 
   return( 
      <> {props.propertName1}
        {props.propertName2}
     </> ) 
}

Point-5: You can access the values of props by destructing them

function ChildComponent({propertyName1, propertyName2}) { 
   return( 
      <> {propertName1}
        {propertName2}
     </> ) 
}