React Props

Previous Page
Next Page

Props short for properties are functional arguments passed into Components. They are like arguments in JavaScript and attributes in HTML.

Using Props

You pass Props into components like so:

Index.js:

ReactDOM.render(<Products product='ice-cream' />
document. getElementById("root"));

The component <Products/> received a props called ‘product’ with the value ‘ice-cream’

The component <Products/> can now make use of this props, for example, in Products.js, we can have code like this:

Products.js:

import React from 'react'

const Products = (props) => {
   return (
      <div>
         We like {props.product}
      </div>
   )
}

export default Products

Result:

In the <Body/> component, we can have code like this:

Body.js:

import React, { Component } from "react";
class Body extends Component {
  render() {
    return (
      <div>
        <HeroSection />
        <Products product="ice-cream" />
      </div>
    );
  }
}
export default Body

Rendering Props

If you want to pass down a variable instead of a string use {} instead of quotes. E.g.

Index.js:

const productName = 'ice-cream'
ReactDOM.render(<Products product={productName} />, document.getElementById("root"));

If props is to be passed into a class component, pass the props into the constructor() function and also in the super() statement also. The constructor() function is called every time the component is initiated or called. The super() method allow the component to inherit properties from a parent class.

import React, { Component } from "react";
class Products extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3> I love {this.props.product} </h3>;
  }
}
export default Products

Props unlike state are immutable, that is their value cannot be changed and are therefore used to pass data from parent to child components.

Putting it together

We will now go through an example where we pass props to a component and display them on the screen. In App.js, write the following code:

import React from 'react'

const App = () => {
   return (
      <div>
         <Products />
      </div>
   )
}

export default App

Index.js will contain the following:

import React from "react";
import ReactDOM from "react-dom";
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'))

We pass props into the <Products/> component which will contain information on the name of a product, id, flavor, and size.

App.js:

import React from "react";

const App = () => {
  return (
    <div>
      <Products 
      name="ice-cream" 
      id="10012" 
      flavor="Vanilla" 
      size="lg" />
    </div>
  );
};

export default App;

Now that we have passed the props, we want to render this props to the screen. Create a new file in the src folder and name it Products.js and insert the following:

import React from 'react'

const Products = (props) => {
    return (
        <div>
            <h2>Name: {props.name}</h2>
            <p>Product ID: {props.id}</p>
            <p>Flavor: {props.flavor}</p>
            <p>Size: {props.size}</p>
        </div>
    )
}

export default Products

Explanation: We pass the props into the function Products, props is an object containing all the information on the product, that is name, flavor etc. We then render each value on the screen using the notation props.property.   

Result:

We have now successfully rendered a component props to the screen. Remember, when you want to pass data through one or more components, use props.

Previous Page
Next Page