React Class Components with Props

When I first started working with React over a decade ago, class components were the backbone of building dynamic user interfaces. Even today, while functional components and hooks dominate the scene, understanding class components and how they handle props remains essential, especially when maintaining legacy code or working with certain libraries.

In this article, I’ll share my firsthand experience using React class components with props. I’ll walk you through what props are, how to pass them to class components, and demonstrate this with a practical example focused on a real-world scenario relevant to the USA.

Table of Contents

What Are Props in React Class Components?

Props (short for properties) are the way we pass data from a parent component to a child component in React. Think of props as the parameters of a function, but for components. They allow components to be reusable and dynamic.

In class components, props are accessible via this.props. This is a key difference from functional components, where props are passed directly as function arguments.

Class Components with Props

While hooks and functional components are preferred for new projects, class components are still widely used in many production apps. They offer lifecycle methods and a clear structure that some developers find intuitive.

Props in class components allow you to:

Customize the component’s output
Pass data down the component tree
Create reusable UI elements

How to Pass Props to a React Class Component

Passing props to a class component is straightforward. You add attributes to the component tag in the parent, and then access those values inside the class component using this.props.

Here’s a quick overview:

<ChildComponent propName="value" />

Inside ChildComponent (class component):

class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.propName}</div>;
  }
}

Example: Display Employee Details Using Class Components with Props

Let me show you a practical example. Imagine you’re building an internal dashboard for a US-based company to display employee information. We want a reusable EmployeeCard class component that accepts props like employee name, department, and location.

Step 1: Create the EmployeeCard Class Component

import React from 'react';

class EmployeeCard extends React.Component {
  render() {
    const { name, department, location } = this.props;
    return (
      <div style={styles.card}>
        <h2>{name}</h2>
        <p><strong>Department:</strong> {department}</p>
        <p><strong>Location:</strong> {location}</p>
      </div>
    );
  }
}

const styles = {
  card: {
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '16px',
    margin: '10px',
    maxWidth: '300px',
    boxShadow: '2px 2px 12px #aaa'
  }
};

export default EmployeeCard;

Step 2: Use EmployeeCard in a Parent Component and Pass Props

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

class EmployeeList extends React.Component {
  state = {
    employees: [
      { id: 1, name: 'John Doe', department: 'Marketing', location: 'New York, NY' },
      { id: 2, name: 'Jane Smith', department: 'Engineering', location: 'San Francisco, CA' },
      { id: 3, name: 'Samuel Lee', department: 'HR', location: 'Chicago, IL' }
    ]
  };

  render() {
    return (
      <div>
        <h1>Employee Directory</h1>
        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
          {this.state.employees.map(emp => (
            <EmployeeCard
              key={emp.id}
              name={emp.name}
              department={emp.department}
              location={emp.location}
            />
          ))}
        </div>
      </div>
    );
  }
}

export default EmployeeList;

You can see the output in the screenshot below.

The EmployeeList component maintains an array of employee data in its state.
It maps over this array and renders an EmployeeCard for each employee.
Each EmployeeCard receives name, department, and location as props.
Inside EmployeeCard, these props are accessed via this.props and displayed.

Alternative: Default Props in Class Components

Sometimes, you want to ensure your component has default values if a prop is not passed. You can set default props in class components like this:

class EmployeeCard extends React.Component {
  // ...render method as before
}

EmployeeCard.defaultProps = {
  location: 'Unknown Location'
};

If a parent component doesn’t provide the location prop, it will default to “Unknown Location”.

Prop Types for Better Code Quality

To catch bugs early and document your component’s expected props, use the prop-types package. It’s conducive in larger teams.

import PropTypes from 'prop-types';

class EmployeeCard extends React.Component {
  // ...render method
}

EmployeeCard.propTypes = {
  name: PropTypes.string.isRequired,
  department: PropTypes.string.isRequired,
  location: PropTypes.string
};

Using React class components with props is a fundamental skill that every React developer should master. Props enable you to create flexible, reusable components that can adapt to different data inputs.

While modern React encourages the use of functional components with hooks, class components remain relevant, especially when working with legacy codebases or certain libraries. Knowing how to pass and use props in class components ensures you can maintain and enhance these applications confidently.