How to use props in Class Component

In React Js class components, you can use props to pass data from a parent component to a child component.

You can access props within a class component using `this. props, making it easy to customize and reuse components while maintaining data flow and separation of concerns in your application.

Here’s will learn how to use props in a class component

Steps to use props in React class component

1. Define a  Class Component

Define a child class component with the name ‘ChildComponent’ using a class-based approach and provide a framework for specifying its appearance and behavior within the render method.

File Name – ChildComponent.js

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    // Component logic here
  }
}

export default ChildComponent;

Steps to write code –

• Import the essential `React` library and the `Component` class from it to make React functionalities available for use.
• Create the `ChildComponent` class and extend it from the `Component` class
• Declare a `render` method within the `ChildComponent` class. This method will return props with JSX.
• Expert `ChildComponent’ to use in another ‘ParentComponent’

2. Access props to Child Component

To access the props passed to your child class component, you can use this.props. Inside the render methods, this.props will contain the props data.

File Name – CildComponent.js

import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {

      const { prop1, prop2 } = this.props;

      return (
      <div>
        <p>Prop1: {prop1}</p>
        <p>Prop2: {prop2}</p>
      </div>
    );

  }
}

export default ChildComponent;

3. Pass Props From Parent Component

To pass props from a parent class component, you can follow these simple steps:

• Create a class called `ParentComponent` that extends the `Component` class.
• Inside the `ParentComponent` class, define a `render()` method.
• Within the `render()` method, return a `<div>` element.
• Inside the `<div>`, include a `<ChildComponent>` element.
• Pass two props to the `<ChildComponent>` element: `prop1` with the value “Value 1” and `prop2` with the value “Value 2”.

File Name – ParentComponent.js

class ParentComponent extends Component {
  render() {
    return (
      <div>
        <ChildComponent prop1="Value 1" prop2="Value 2" />
      </div>
    );
  }
}

This code demonstrates the passing props to a `ParentComponent` rendering a `<ChildComponent>` within it. This showcases the concepts of component composition and passing props from parent to child components in React.

Use Default Props in Class Component

You can also define default values for props in case they are not provided by the parent component. To do this, use the default props property inside your class component.

To use Default props, you can follow these simple steps:

• Define `TestComponent` as a React component.
• Set default values for `prop1` and `prop2`.
• Render a `<div>` element.
• Display the value of `prop1` in the first `<p>` element.
• Display the value of `prop2` in the second `<p>` element.
• Access prop values using destructuring from `this.props`.
• Export `TestComponent` as the default export for use in other parts of the application.

class TestComponent extends Component {
  static defaultProps = {
    prop1: 'Default Value 1',
    prop2: 'Default Value 2',
  };

  render() {
    // Accessing props
    const { prop1, prop2 } = this.props;

    return (
      <div>
        <p>Prop1: {prop1}</p>
        <p>Prop2: {prop2}</p>
      </div>
    );
  }
}

export default TestComponent;

If the parent component doesn’t provide values for prop1 or prop2, the default values will be used.

Suggestion

We’ve shared simple steps with you to code HTML. You’re now familiar with HTML and understand why it’s important to learn.

If you found this tutorial helpful, please share it with your friends so they can learn too