react js-tutorial

React props

We use props in React to pass data from one component to another (from a parent component to a child component(s)). Props is just a shorter way of saying properties. They are useful when you want the flow of data in your app to be dynamic.

This is what my App.js component looks like:

function App() {
  return (
    <div className="App">    
    </div>
  )
}
export default App

Now let’s create another component named Tool.js. This file will show information about a product designer’s favorite tool. Without props, the code will look something like this:

Tool.js

function Tool() {
    return (
      <div>
        <h1>My name is Ihechikara.</h1>
        <p>My favorite design tool is Figma.</p>
      </div>
    );
}
export default Tool

We will now import this component into the App component. That is:

App.js

import Tool from "./Tool"
function App() {
  return (
    <div className="App">
      <Tool/>
    </div>
  )
}
export default App

Let’s assume that the Tool component will be reusable across different components to describe different designers and their favourite tools.

While React makes it easy for us to import a component’s logic without rewriting the code, this particular component already has its data hard coded. This means that we have to either rewrite that logic for every other component, or – you guessed right – use props to alter the data for different components.

If you don’t yet understand how this works, props allow us reuse a component’s logic dynamically. This means that the data in the component will not be static. So for every other component using that logic, its data can be modified to fit the requirements.

How to use props in React

In this section, you will learn two ways to use props: one without destructuring and the other with destructuring.

How to use props without destructuring

To use props, you have to pass in props as an argument in your function. This is similar to passing arguments into your regular JavaScript functions. Here’s an example:

Tool.js

function Tool(props) {
  const name = props.name;
  const tool = props.tool;
    return (
      <div>
        <h1>My name is {name}.</h1>
        <p>My favorite design tool is {tool}.</p>
      </div>
    );
}

export default Tool

Now I will explain everything that happened above step by step.

Step 1 – Pass in props as an argument

We did that in the first line of the code above: function Tool(props){}. This automatically allows you to use props in your React app’s component.

Step 2 – Declare props variable(s)

Tool.js

const name = props.name;
const tool = props.tool;

As you can see above, these variables are different from regular variables because the data in them has to do with props.

If you do not want to create variables for your props, you can go ahead and pass them directly into your template like this: <h1> My name is {props.name} </h1>

Step 3 – Use variable(s) in JSX template

Now that you have declared your variables, you can go on and place them where you want them to be in your code.

return (
      <div>
        <h1>My name is {name}.</h1>
        <p>My favorite design tool is {tool}.</p>
      </div>
    );

Step 4 – Pass data to props in the App component

We are done creating our props, so the next step is to pass data to them. We have already imported the Tool component and this is displayed in the browser at the moment:

My name is .
My favorite design tool is .

You can create default data for your props so they don’t appear empty on declaration. You will see how to do that in the last section.

Recall that this is the current state of the App component:

import Tool from "./Tool"
function App() {
  return (
    <div className="App">
      <Tool/>
    </div>
  )
}
export default App


You must be wondering where the data will be passed to exactly. To do this, you pass in the data like attributes. It looks like this:

import Tool from "./Tool"
function App() {
  return (
    <div className="App">
      <Tool name="Ihechikara" tool="Figma"/>
    </div>
  )
}
export default App

Notice the change? Here: from <Tool/> to <Tool name=”Ihechikara” tool=”Figma”/>. This will not throw an error your way because those attributes are attached to the props created in the Tool component.

You should have this displayed in your browser:

My name is Ihechikara.
My favorite design tool is Figma.

Now you can create data dynamically for any component using the logic defined in the Tool component. You can declare as many props as you want.

Next, you will learn how to use props with destructuring.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.