The Basics of Props in React

Photo by israel palacio on Unsplash

Props, short for properties, are an essential concept in React. They are inputs to a React component, passed from the parent component as attributes in the JSX element. In this article, we will explore what props are, how to use them in React, and how they can be used to customize and reuse components throughout an app.

What are props in React?

Props are inputs to a React component, passed from the parent component as attributes in the JSX element. They are used to customize the behavior and appearance of a component, and they are read-only, meaning that the component cannot modify its own props.

Here is an example of a component that displays a user profile, with the name and avatar passed as props:

import React from 'react';

function UserProfile(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <img src={props.avatar} alt={props.name} />
    </div>
  );
}

The parent component can pass the props to the UserProfile component like this:

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

function App() {
  return (
    <div>
      <UserProfile name="Patricia" avatar="https://example.com/patricia.jpg" />
      <UserProfile name="James" avatar="https://example.com/james.jpg" />
    </div>
  );
}

Props can be of any type, including numbers, strings, booleans, arrays, and objects. They can also be passed as children to a component, like this:

<UserProfile>
  <h1>Patricia</h1>
  <img src="https://example.com/patricia.jpg" alt="Patricia" />
</UserProfile>

In this case, the UserProfile component can access the children as a prop called props.children.

Props are a powerful tool in React, and they are used to customize and reuse components throughout an app. They are also a useful way to pass data from a parent component to a child component, as they are the only way for a child component to receive input from the parent.

How to use props in React

Using props in React is straightforward. To access a prop in a component, you can use the props object that is passed as an argument to the component function or the this.props object in a class-based component.

Here is a specific example of a functional component that displays a list of items, with the list passed as a prop:

import React from 'react';

function ItemList(props) {
  return (
    <ul>
      {props.items.map((item) => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

The parent component can pass the prop like this:

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

const items = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
];
function App() {
  return <ItemList items={items} />;
}

In this example, the ItemList component receives the items prop and uses that to displays an unordered list of the names from the objects included in items by mapping through them.

Conclusion

In conclusion, props are an important concept in React and are used to customize and reuse components throughout an app. They are passed from the parent component as attributes in the JSX element, and are read-only. Understanding how to work with props is essential for building scalable and maintainable applications with React, and with a little practice and experience, you will be able to use them effectively in your projects.