Sebastian Gomez

Apr 15, 2023

Updated: Jun 25, 2026

Mastering React Props

React is a JavaScript library used to build single page applications. The library focuses on creating reusable components that can be rendered in different parts of an app.

In React, props are one of the most important concepts we need to understand. Props are properties passed to React components and used to control their behavior.

Valid as of React 19 / Next.js 16: The concepts in this post (passing props as attributes, accessing them, destructuring them, default values, and the difference between props and state) are all still fully valid. The one important change since 2023 is how default values are set: defaultProps is no longer used on function components. We explain the modern pattern further down.

Understanding props in React

Props are a way to pass data from one component to another in React. They are used to control the behavior of components and to customize their appearance. Props are immutable, which means that, by convention, once they are passed to a component, that component must not change them. This is not a restriction the language enforces by force, but a contract we respect so the app stays predictable.

Props can be passed to components as attributes in the component declaration. For example, if we want to pass a prop called "nombre" to a component called "Persona", we can do it like this:

<Persona nombre="Juan" />

In this example we are passing the prop "nombre" with the value "Juan" to the "Persona" component. The "Persona" component can access that prop through props.nombre.

Advantages of using props in React components

Props have several advantages in React components:

• They allow greater modularity in the code. Components can be split into smaller, reusable pieces that combine into larger, more complex components.
• They make the code easier to maintain. By passing data through props, components can be more independent and less error prone.
• They make the code easier to understand. By using props to pass data between components, it is easier to understand how the app behaves as a whole.

Two ways to think about props

In practice, it helps to distinguish two groups of props, even though technically they are all passed the same way:

The props you define are the properties you decide for your own components. For example, if you have a "Botón" component with a "texto" property, you invent that "texto" prop and give it whatever meaning you want.

The props React forwards to DOM elements are ordinary props you pass explicitly to tags like <div>, <p>, or <button>, and that React translates into real DOM attributes. For example, className (which React maps to the DOM class attribute), style, or event handlers like onClick. One thing to clarify: these props are not "automatic" nor a special category managed by React. You pass them explicitly, just like any other prop.

// "texto" is a prop you define; "className" and "onClick"
// are props you pass explicitly and React forwards to the DOM.
function Boton({ texto }) {
  return (
    <button className="btn" onClick={() => alert('Hola')}>
      {texto}
    </button>
  );
}

Best practices for using props in React

To use props effectively in React, it helps to follow some best practices:

• Keep props as simple as possible. Complex props can make components harder to understand and maintain.
• Treat props as immutable. A component must not modify the props it receives, that makes it easier to understand how it behaves and avoids errors.
• Document your components' props. This makes it easier to understand how they should be used and what values should be passed.

How to pass props to child components in React

In React, props are passed to child components using the curly braces syntax {}. For example, if we have a "Padre" component with a "Hijo" child component, we can pass it a prop like this:

// Definition of the Padre function, which will be a React component
function Padre() {
  // We return the Hijo component with a prop called "nombre" and the value "Juan"
  return <Hijo nombre="Juan" />;
}

// Definition of the Hijo function, which receives props as an argument
function Hijo(props) {
  // We return a paragraph showing "Hola" followed by the value of the "nombre" prop
  return <p>Hola {props.nombre}</p>;
}

In this example we are passing the prop "nombre" with the value "Juan" to the "Hijo" component. The "Hijo" component can access that prop through props.nombre.

Destructuring props in React

In React, props can be destructured to access specific values. For example, if we have a "Persona" component with the props "nombre" and "edad", we can destructure them like this:

// Definition of the Persona function, which receives props as an argument
function Persona(props) {
  // With destructuring syntax we extract 'nombre' and 'edad' from 'props'
  const { nombre, edad } = props;

  // We return a paragraph showing the name and age using interpolation
  return <p>{nombre} tiene {edad} años.</p>;
}

In this example we are destructuring the props "nombre" and "edad" to use them in the "Persona" component. This makes it easier to work with props and keep the code readable.

Default prop values in React 19

We often want a prop to have a default value when whoever uses the component does not provide it.

This used to be done with the defaultProps property on the component function. Important: in React 19 that approach no longer works on function components. React 18.3 started showing a warning and React 19 removed support for defaultProps on function components entirely. The recommended way today is to use JavaScript default parameters directly in the destructuring:

// Definition of the Botón function, which receives props as an argument.
// If "texto" is not passed, 'Enviar' is used by default.
function Boton({ texto = 'Enviar' }) {
  // We return a button showing the value of the "texto" prop
  return <button>{texto}</button>;
}

In this example we set a default value of "Enviar" for the "texto" prop. If no value is provided for "texto", that default value is used. This pattern is simpler, lives right next to the component signature, and is the current practice in React 19.

Props vs. State in React

In React, props and state are two different concepts used to control the behavior of components.

Props are used to pass data from one component to another and a component must not modify them. State is used to store data that can change over time and that is indeed mutable inside the component.

In general, it is recommended to use props to pass data between components and state to control the behavior of a particular component.

Debugging props in React

In React, debugging props can be a tricky task, since they are passed through multiple components in the app.

To debug props, we can use tools like React Developer Tools, which are still the recommended option. These tools let you inspect the props being passed to components and understand how the app behaves as a whole.

Conclusion

Props are an important concept in React that lets us build reusable, customizable components. By following best practices and understanding how to work with props, we can build more robust apps that are easier to maintain.

10 exercises to practice with props

Now that you know how props work in React, here are 10 exercises to practice:

1. Create a "Bienvenida" component that renders with a "mensaje" prop.
2. Create a "Cabecera" component that renders with two props: "título" and "subtítulo".
3. Create a "Botón" component that renders with a "texto" prop. Set a default value of "Enviar" for that prop using a default parameter in the destructuring.
4. Create a "Lista" component that renders with a prop called "items", which is an array of strings. Render each element of the array as a <li> element.
5. Create an "Imagen" component that renders with two props: "url" and "alt".
6. Create a "Formulario" component that renders with three props: "título", "subtítulo", and "botón".
7. Create a "Contador" component that renders with a prop called "valorInicial". The default value of this prop should be 0. Add a button to increase the counter.
8. Create a component that receives two props: "nombre" and "apellido". Render the values together as the full name.
9. Create a component that receives as a prop an array of objects, each object representing a person with the fields nombre, apellido, and edad. Render each person in a table.
10. Create a component that receives as a prop an object with the fields nombre, apellido, and edad. Render the values in a <p> element.

3-point summary

1. Props are immutable by convention and are used to pass data between components, while state is mutable and is used to control the behavior of a particular component.
2. Debugging props in React can be tricky, but tools like React Developer Tools help you inspect props and understand the app's behavior.
3. In React 19, default values are set with default parameters in the destructuring (function Botón({ texto = 'Enviar' })), no longer with defaultProps.

With these exercises and the knowledge you gained about props in React, you will be well on your way to mastering this key concept. Keep practicing and experimenting with props to improve your skills as a developer.

That's all, I hope this post is useful to you and that you can apply it to a project you have in mind. If you want to keep going deeper, take a look at my other posts on React and Next.js.

Leave me a comment if it helped, if you want to add an opinion, or if you have any questions. And remember, if you liked it, you can also share it using the social links below. Good luck.