React.js

How to Use Props in React for beginners

Published

7 months ago

February 13, 2024

What are props in React?
Here’s a beginner guide on how to use props in React, explained step by step:

What are props in React?

In React, props are essentially a means to pass the data from one component to another, typically from a parent component to it’s child components. Think of props as properties that carry information between different parts of your application. They are handy for creating dynamic data flow within your app.

Imagine you’re building a digital pet game in React. Each pet has its own component, and you want to display different information about each pet, like their name, type, and age. Props are like messages you can send between these components to share this information.

For example, let’s say you have a Pet component,

function Pet(props) {
  return (
    <div>
      <h2>Name: {props.name}</h2>
      <p>Type: {props.type}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

Now, when you use this Pet component elsewhere in your app, you can pass in specific information for each pet using props,

function App() {
  return (
    <div>
      <h1>My Pets</h1>
      <Pet name="Fluffy" type="Cat" age="3" />
      <Pet name="Buddy" type="Dog" age="5" />
    </div>
  );
}

In this example, we’re passing “name", “type", and “age” as props to the Pet component to customize the information displayed for each pet. So, props help your components communicate and display the right data.

Here’s a beginner guide on how to use props in React, explained step by step:

Step 1:- Setting Up the Parent Component

Start by creating a component that will serve as the parent. This is where you’ll define the data you want to pass down to child components.

Let’s say you’re creating a basic todo list. Your parent component might look something like this,

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

function TodoList() {
  return (
    <div>
      <ChildComponent todo="Buy groceries" />
      <ChildComponent todo="Finish homework" />
    </div>
  );
}

export default TodoList;

Step 2:- Creating the Child Component

Now, you’ll create the child component that will receive the data (props) passed down from the parent.

Let’s name this child component “TodoItem”,

import React from 'react';

function TodoItem(props) {
  return (
    <div>
      <p>{props.todo}</p>
    </div>
  );
}

export default TodoItem;

Step 3:- Passing Data from Parent to Child

In the parent component, you pass down data by setting props (properties) on the child component.

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

function TodoList() {
  return (
    <div>
      <TodoItem todo="Buy groceries" />
      <TodoItem todo="Finish homework" />
    </div>
  );
}

export default TodoList;

Step 4:- Using Props in the Child Component

Inside the child component, you can access the passed data using props.

import React from 'react';

function TodoItem(props) {
  return (
    <div>
      <p>{props.todo}</p>
    </div>
  );
}

export default TodoItem;

That’s it! You’ve successfully used props in React. Now, the TodoItem component can display different todo items based on the data passed down from the parent TodoList component.

CodeSick