React Functional Component Props

When I first started building React applications, understanding how to pass data between components was a game-changer. React’s functional components are now the standard, and mastering props is essential to write clean, reusable, and maintainable code.

Props (short for properties) allow you to pass data from a parent component to a child component. This simple concept unlocks powerful component communication and dynamic UI rendering.

In this article, I’ll share my firsthand experience on how to use props in React functional components. I’ll walk you through different methods, practical examples with real-world USA scenarios, and tips to write better React code.

Table of Contents

What Are Props in React Functional Components?

Props are the way React components receive data. Think of them as function arguments, but for components.

When you create a component, you can pass props to customize its behavior or display dynamic content. Functional components receive props as a parameter, and you can access the data inside the component.

Here’s the basic syntax:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

You use this component like this:

<Greeting name="John" />

This will render:

Hello, John!

Props help you:

Make components reusable
Pass dynamic data
Control component behavior from the parent
Keep your UI consistent and maintainable

Method 1: Pass Simple Props (Strings, Numbers)

Let me show you a practical example related to a USA-based scenario. Suppose you’re building a dashboard for an online education platform that tracks student progress across various states.

Here’s a simple component that displays a student’s name and the state they are from:

import React from 'react';

function StudentInfo(props) {
  return (
    <div>
      <h2>Student: {props.name}</h2>
      <p>State: {props.state}</p>
    </div>
  );
}

export default function Dashboard() {
  return (
    <div>
      <StudentInfo name="Emily Clark" state="California" />
      <StudentInfo name="James Smith" state="Texas" />
    </div>
  );
}

You can see the output in the screenshot below.

This example demonstrates passing string props (name and state) to the StudentInfo component. It’s easy and essential for most React apps.

Method 2: Use Destructuring for Cleaner Code

Instead of accessing props via props.name, I prefer destructuring props directly in the function signature. It makes the code cleaner and easier to read.

Here’s the same example rewritten with destructuring:

function StudentInfo({ name, state }) {
  return (
    <div>
      <h2>Student: {name}</h2>
      <p>State: {state}</p>
    </div>
  );
}

You can see the output in the screenshot below.

This small change improves readability, especially when you have multiple props.

Method 3: Pass Objects as Props

Sometimes, you want to pass more complex data structures. For example, student data might include multiple fields.

Here’s how I handle that:

function StudentInfo({ student }) {
  return (
    <div>
      <h2>Student: {student.name}</h2>
      <p>State: {student.state}</p>
      <p>Grade: {student.grade}</p>
      <p>Completed Courses: {student.completedCourses.join(', ')}</p>
    </div>
  );
}

export default function Dashboard() {
  const student1 = {
    name: 'Emily Clark',
    state: 'California',
    grade: 'A',
    completedCourses: ['React Basics', 'Advanced JavaScript'],
  };

  const student2 = {
    name: 'James Smith',
    state: 'Texas',
    grade: 'B',
    completedCourses: ['React Basics'],
  };

  return (
    <div>
      <StudentInfo student={student1} />
      <StudentInfo student={student2} />
    </div>
  );
}

You can see the output in the screenshot below.

Passing an object as a prop keeps your component flexible and organized, especially when dealing with related data.

Method 4: Default Props with Functional Components

Sometimes, you want to provide default values for props if the parent doesn’t supply them.

In class components, you might have used defaultProps. In functional components, you can achieve the same with default parameters:

function StudentInfo({ name = 'Unknown', state = 'Unknown' }) {
  return (
    <div>
      <h2>Student: {name}</h2>
      <p>State: {state}</p>
    </div>
  );
}

Now, if you render <StudentInfo /> without props, it will display “Unknown” for both fields.

Method 5: Pass Functions as Props

Props aren’t limited to data; you can also pass functions to handle events or callbacks.

For example, suppose you want to track when a user clicks on a student’s name to see more details.

function StudentInfo({ name, state, onClick }) {
  return (
    <div>
      <h2 style={{ cursor: 'pointer', color: 'blue' }} onClick={() => onClick(name)}>
        Student: {name}
      </h2>
      <p>State: {state}</p>
    </div>
  );
}

export default function Dashboard() {
  const handleStudentClick = (studentName) => {
    alert(`You clicked on ${studentName}`);
  };

  return (
    <div>
      <StudentInfo name="Emily Clark" state="California" onClick={handleStudentClick} />
      <StudentInfo name="James Smith" state="Texas" onClick={handleStudentClick} />
    </div>
  );
}

This approach allows parent components to control child component behavior, making your app interactive.

Method 6: Prop Types for Better Code Quality

To avoid bugs and improve maintainability, I always recommend using prop-types to validate props.

First, install the package:

npm install prop-types

Then, add prop types to your component:

import PropTypes from 'prop-types';

function StudentInfo({ name, state }) {
  return (
    <div>
      <h2>Student: {name}</h2>
      <p>State: {state}</p>
    </div>
  );
}

StudentInfo.propTypes = {
  name: PropTypes.string.isRequired,
  state: PropTypes.string.isRequired,
};

This will warn you if a required prop is missing or of the wrong type during development.

Putting It All Together: Full Example

Here’s a complete example combining everything I’ve shared:

import React from 'react';
import PropTypes from 'prop-types';

function StudentInfo({ student, onClick }) {
  const { name = 'Unknown', state = 'Unknown', grade = 'N/A', completedCourses = [] } = student;

  return (
    <div>
      <h2
        style={{ cursor: 'pointer', color: 'blue' }}
        onClick={() => onClick(name)}
      >
        Student: {name}
      </h2>
      <p>State: {state}</p>
      <p>Grade: {grade}</p>
      <p>Completed Courses: {completedCourses.join(', ')}</p>
    </div>
  );
}

StudentInfo.propTypes = {
  student: PropTypes.shape({
    name: PropTypes.string,
    state: PropTypes.string,
    grade: PropTypes.string,
    completedCourses: PropTypes.arrayOf(PropTypes.string),
  }).isRequired,
  onClick: PropTypes.func.isRequired,
};

export default function Dashboard() {
  const students = [
    {
      name: 'Emily Clark',
      state: 'California',
      grade: 'A',
      completedCourses: ['React Basics', 'Advanced JavaScript'],
    },
    {
      name: 'James Smith',
      state: 'Texas',
      grade: 'B',
      completedCourses: ['React Basics'],
    },
  ];

  const handleStudentClick = (studentName) => {
    alert(`You clicked on ${studentName}`);
  };

  return (
    <div>
      {students.map((student, index) => (
        <StudentInfo key={index} student={student} onClick={handleStudentClick} />
      ))}
    </div>
  );
}

This example shows:

Passing complex objects as props
Using default values with destructuring
Handling click events via function props
Prop validation with prop-types
Rendering a list of students dynamically

Working with props in React functional components is easy once you get the hang of it. It’s a fundamental skill that lets you build dynamic and scalable user interfaces.

If you’re coming from class components or just starting with React, focus on understanding how props flow from parents to children, and how you can control components with them.