Managing Props

As you saw in a previous article, components let you split the UI into independent, reusable pieces and think about each piece in isolation.

We can take this reuse much further with another fundamental concept - "props".

Short for properties, props are a crucial part of React’s component-based architecture, allowing for the passing of data from parent components to child components.

Understanding how to work with props will enable you to create more dynamic and reusable components.

This article will guide you through the basics of using props in React.

What Are Props in React?

In React, components can be thought of as functions. Like functions take arguments and return a result, React components take props as arguments and return a React element that describes what should appear on the screen.

Props are simply a way of passing data from parent components down to their children.

They make components reusable by allowing them to receive data and behave accordingly.

Basic Usage of Props

To give a component a prop, you add an attribute when you use it:

<Hello name="Niall Maher" />

In this example, Hello is being given a prop called name with a value of "Niall Maher".

The component can then use this prop internally to render data:

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

In this component definition, props is an object that holds all props passed to the component.

Here, the component uses the name prop to output its value within an h1 tag which results in the component rendering <h1>Hello Niall Maher</h1>.

Different Types of Data

We can pass multiple props and various types of data, not just strings. You can pass whatever you need via props such as numbers, arrays, objects, booleans, and functions For example:

<MyComplexThing someArray={[1, 2, 3]} someFunction={myFunction} someObject={{ name: 'Niall', age: 31 }} />

We can then use all of these properties in our component.

Props are Read-Only

One important thing to remember is that props are "read-only".

This concept is part of React's philosophy of "unidirectional data flow" or "one-way data flow, " making the application's behavior more predictable.

function Hello(props) {
  props.name = "John Doe"; // This is wrong! ❌
  return <h1>{props.name}</h1>;
}

In this example, changing the name inside Hello is incorrect and will result in an error.

React components should act like pure functions with respect to their props.

Pure Functions Quick Reminder:​​ A pure function is a function which: Given the same input, will always return the same output and produces no side effects.

Children

Another key concept to understand with props is "children", which refers to the content placed between a component's opening and closing tags.

In simple terms, "children" in React refer to the content nested between a component's opening and closing tags. They allow components to be composed together, and components can access their children via the props.children property.

This can be very useful for making layout components or components behave as we might expect from an HTML element.

As an example, imagine we had a card layout that we wanted to make reusable to wrap other elements:

// Create a card component that renders children
function Card(props) {
  return <div className='card'>{props.children}</div>;
}

// Usage
<Card>
  <h1>Hello, World!</h1>
  <p>Wooo we are learning props!!!</p>
</Card>

Children, just like your other props, can be anything you need! This includes, but is not limited to:

• Strings and numbers
• JSX elements or JSX expressions
• Other React components
• JavaScript expressions or functions

Using children is a common pattern in React, so you will get plenty of opportunities to practice as you build your applications.

As you continue your journey learning React.js, you'll see that understanding and using props effectively is crucial to building complex, scalable applications.

In the next section, we are going to look at handling events. In our section on state, we used the onClick event, and in the next article, we will look at other common events.

👉 Check back here for the link when it's done!

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers? You can join our free web developer community here. 🎉