React props - CodingStatus

In React, “props” is short for “properties,” and it’s a fundamental concept that allows you to pass data from a parent component to a child component.

Props are read-only, which means that a child component can receive data through props, but it cannot modify or change the data it receives.

Passing Props

You can pass props using this syntax

<ComponentName attributeName = value />

Accessing Props

If you can access props in the function component using this syntax

props.attributeName

If you can access props in the class component using this syntax

this.props.attributeName

Now let’s see these syntaxes in the examples with function and class components one by one

Table of Contents

Props in React JS

You can use the props in the function component and class component. But both components use props in different ways. So, you should learn the following topics separately

Function Component with Props

In React, function components are a simple way to write components that only contain a render method and don’t have their own state.

They accept a single “props” (which stands for properties) object argument with data and return React elements describing what should appear on the screen.

Example

Pass props from the Developer component to the DeveloperProfile component

// Developer.js

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

const Developer = () => {
  const developerData = {
    name: 'John Doe',
    title: 'Frontend Developer',
    experience: '5 years',
  };

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

export default Developer;

Access props in the DeveloperProfile component

// DeveloperProfile.js

import React from 'react';

const DeveloperProfile = (props) => {
  const { name, title, experience } = props.developer;

  return (
    <div>
      <h2>{name}</h2>
      <p>Title: {title}</p>
      <p>Experience: {experience}</p>
    </div>
  );
};

export default DeveloperProfile;

Class Component with Props

Passing props to a class component in React is done when you render the component within another component. You specify the props as attributes when rendering the component, and then the props are accessible within the class component via this.props. Here’s how you can pass and access props in a class component:

Example –

Pass props from the Developer component to the DeveloperProfile component

// Developer.js

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

class Developer extends Component {
  render() {
    const developerData = {
      name: 'John Doe',
      title: 'Frontend Developer',
      experience: '5 years',
    };

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

export default Developer;

Access props in the DeveloperProfile component

// DeveloperProfile.js

import React, { Component } from 'react';

class DeveloperProfile extends Component {
  render() {
    const { name, title, experience } = this.props.developer;

    return (
      <div>
        <h2>{name}</h2>
        <p>Title: {title}</p>
        <p>Experience: {experience}</p>
      </div>
    );
  }
}

export default DeveloperProfile;

Summary

In this example, the Developer component renders the DeveloperProfile component and passes the developerData object as a prop. The DeveloperProfile component then uses this prop to display the developer’s information. The props argument in the DeveloperProfile component contains all the properties passed from the parent component.

When the Developer component is rendered, it will display the Developer’s profile details as specified in the developerData object. The DeveloperProfile component receives the developerData object as a prop and displays the developer’s name, title, and experience.