React: Passing State as Props and destructuring props in React.

In this blog, I am going to teach you how to send state as props and how to render it in child components. I always recommend to use React Docs. I use it all the time. Here is the link for it. But I found the examples complicated and decided to explain in my words.

But, Before we start let’s remember what is state and props . First of all both are plain JavaScript objects. Props get passed to the child component, whereas state is managed within the component.

Here are some awesome resources for further reading on when to use props vs state: Props vs State

Now we have basic understanding of Props and State. Let’s jump to the example and learn deeper.

Here is my app called Season, I have initial state inindex.js file. SeasonDisplay is our child component. Instead of rendering our content in main file, we will send our initial state down to child component(SeasonDisplay) as props and render it to the DOM.

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'
import SeasonDisplay from './SeasonDisplay'
const App = () => {
  const [lat, setLat] = useState(null)
  const [errorMessage, setErrorMessage] = useState('')
  useEffect(() => {
     window.navigator.geolocation.getCurrentPosition(
     (position) => setLat(position.coords.latitude),
     (err) => setErrorMessage(err.message)
     );
  },[])
let whatToRender = () => {
   if (errorMessage && !lat) {
    return <div style={{ backgroundColor: 'grey', width: '50%',    display: 'flex', justifyContent: 'center', color: 'red' }}>Error: {errorMessage} </div>
  }
  if (!errorMessage && lat) {
     return <div> Latitude: {lat} </div>
   }
  }
 return (
   <div>{whatToRender()}</div>
   )
}
ReactDOM.render(<App />, document.querySelector('#root'))

First we have to import our child component. Once we imported it, we are going to send our state down as props.

In my case, I am going to send my latitude property down, as you see i have two if statement, where second one renders latitude . Instead of rendering latitude in this component, I am going to send it down to SeasonDisplay component.

Like I said, first we have to import it and simply send it down like so:

if (!errorMessage && lat) {
   return <SeasonDisplay latitude={lat} />
}

It is very important how you name your props in my example, I named it latitude .

It might be confusing for you, but first variable before the equal sign is the name of the props , you can call it however you want, but make sure you put properly name of state which is in curly brace . Now, In our child component we have access to latitude:

import React from 'react'
const SeasonDisplay = (props) => {
    console.log(props.latitude)  --> 40.621496799999996
    return <div>Latitude: {props.latitude}</div>
  }
export default SeasonDisplay

Remember to put props in parentheses, otherwise you will get an error.

Destructuring

Here is another way how to receive props from parent component using destructuring :

import React from 'react'
const SeasonDisplay = ({ latitude }) => {
   return <div>Latitude: {latitude}</div>
}
export default SeasonDisplay

Destructuring really shines in React apps, where it can greatly simplify how you write props. Destructuring was introduced in ES6. It’s a JavaScript feature that allows us to extract multiple pieces of data from an array or object and assign them to their own variables.

Instead of writing props all over the place, you can us destructuring and make it easier. It is very useful when we have a lot of properties. Feel free to read my blog about destructuring for further learning.

Destructuring props made this code much DRYer and easier to read. It has the added benefit of giving us access only to the props we need, and letting us view them on the file where we use them.