React Class Components with Props

React Class Components with Props: In react JS, Props are values passed from a parent class component to a child class component. The child component is included within the JSX of the parent component and receives these values as attributes.

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

Table of Contents

Ways to use Class 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.

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 class component

Access Props

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

File Name – DeveloperProfile.js

import React, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    return <h3>{this.props.fullName}</h3>;
  }
}

export default DeveloperProfile;

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 React, { Component } from 'react';
import DeveloperProfile from './DeveloperProfile';

class Developer extends Component {
  render() {
    return <DeveloperProfile fullName="Rapsan Jani" />;
  }
}

export default Developer;

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 class component

Access Prop

To access multiple basic props, Create a class 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

import React, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    return (
      <div>
        <h3>{this.props.fullName}</h3>
        <p>{this.props.position}</p>
      </div>
    );
  }
}

export default DeveloperProfile;

Pass Props

To pass multiple basic props, Create a class 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 React, { Component } from 'react';
import DeveloperProfile from './DeveloperProfile';

class Developer extends Component {
  render() {
    return <DeveloperProfile fullName="Rafsan Jani" position="Software Developer" />;
  }
}

export default Developer;

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 React, { Component } from 'react';
import DeveloperProfile from './DeveloperProfile';

class Developer extends Component {
  constructor(props) {
    super(props);
    this.fullName = "Rafsan Jani";
  }

  render() {
    return <DeveloperProfile fullName={this.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 React, { Component } from 'react';
import DeveloperProfile from './DeveloperProfile';

class Developer extends Component {
  render() {
    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 class 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

import React, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    const { fullName, position } = this.props;

    return (
      <div>
        <h3>{fullName}</h3>
        <p>{position}</p>
      </div>
    );
  }
}

export default DeveloperProfile;

6. Default Props

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

File Name – DeveloperProfile.js

import React, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    const { fullName = 'Guest', position = 'Fresher' } = this.props;

    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, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    const { like, handleLike } = this.props;

    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, { Component } from 'react';
import DeveloperProfile from './DeveloperProfile';

class Developer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      like: 0,
    };
  }

  handleLike = () => {
    this.setState((prevState) => ({
      like: prevState.like + 1,
    }));
  };

  render() {
    return (
      <div>
        <DeveloperProfile like={this.state.like} handleLike={this.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.

Access Props

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

File Name – DeveloperProfile.js

import React, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    return (
      <div>
        <h3>{this.props.fullName}</h3>
        <p>{this.props.position}</p>
      </div>
    );
  }
}

export default DeveloperProfile;

Access children

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

File Name – Profile.js

import React, { Component } from 'react';

class Profile extends Component {
  render() {
    return (
      <div className="profile">
        {this.props.children}
      </div>
    );
  }
}

export default Profile;

Pass Props

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

File Name – Developer.js

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

class Developer extends Component {
  render() {
    const fullName = "Rafsan Jani";
    const position = "Software Developer";

    return (
      <>
        <Profile>
          <DeveloperProfile
            fullName={fullName}
            position={position}
          />
        </Profile>
      </>
    );
  }
}

export default Developer;

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, { Component } from 'react';
import DeveloperProfile from './DeveloperProfile';

class Developer extends Component {
  render() {
    const developerInfo = {
      fullName: 'Rapsan Jani',
      position: 'Software Developer',
      gender: 'male'
    };

    return (
      <div>
        <DeveloperProfile {...developerInfo} />
      </div>
    );
  }
}

export default Developer;

Create Class Component with React APP

You can pass parameters into a class component by using React 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

You can access props inside the child component ‘DeveloperProfile’

File Name – DeveloperProfile.js

import React, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    const { fullName, position } = this.props;

    return (
      <div>
        <h3>{fullName}</h3>
        <p>{position}</p>
      </div>
    );
  }
}

export default DeveloperProfile;

3. Pass Props

You can pass props from the parent ‘Developer’ component

File Name – Developer.js

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

class Developer extends Component {
  render() {
    return <DeveloperProfile fullName="Rafsan Jani" position="Software Developer" />;
  }
}

export default Developer;

4. Use Class Component

You can use class component to import into another component

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.

nom start

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