How to pass state as props in React.js?

What is a Lifecycle Method in React.js? »

If you remember, you created a component called DayNightDisplay? In this section, you’ll import this components inside the index.js file, and inside the render() method, instead of printing out the current hour right there, you’ll show the DayNightDisplay component instead. The goal here is not just to show the current hour, but to show some images based on whether it’s day or night.

So, to get started, open index.js file and import DayNightDisplay component as:

import DayNightDisplay from './DayNightDisplay';

Now, inside the render() method, you need to return the imported component instead of showing the current hour. However, when rendering the component, you also need to pass the information about current hour to the DayNightDisplay component. This is where you pass a state a props. So, you need to get the value of current hour, which is inside the state object:

state = {hrs: '', hasError: false};

And pass it to the DayNightDisplay component. So, you’re going to add a new prop named hrs and assign it a value of this.state.hrs. So, you’re taking a property from the App component’s state, and passing it down as a prop to the DayNightDisplay component. Now, DayNightDisplay is going to be very closely linked to the App component. Remember, whenever setState() is called inside the App component, render() method will be called on its own and the DayNightDisplay component will also be re-rendered. Go ahead and make the following changes to the render() method:

import React from 'react';
import ReactDOM from 'react-dom';
import DayNightDisplay from './DayNightDisplay';

class App extends React.Component {

    state = {hrs: '', hasError: false};

    componentDidMount(){

       const getHours = () => {
           const currentHours = new Date().getHours();
           return currentHours;
       }

       setTimeout(() => {
               const hours = getHours().toString();
               this.setState({hrs: hours});
       },
       3000);    
    }

    componentDidUpdate(){
       console.log("Component got updated on the screen");
    }

    render(){

       if (this.state.hasError){
           return <div>An error has occurred!</div>;
       }

       return <DayNightDisplay hours={this.state.hrs}/>;

    }

}

ReactDOM.render(
 <App />,
 document.querySelector('#root')  
);

Now, when you make pass some properties to a functional component, it is going to be used as the first parameter inside the component. And you oftten refer to it as props. Inside props, there should be a property called “hours”. To check the same, you can console.log it inside the DayNightDisplay component as follows:

import React from 'react';

const DayNightDisplay = (props) => {
    console.log(props.hours);
    return <div>
       Day Night Display
    </div>;
};

export default DayNightDisplay;

Now, if you save the files and run the server, you should be able to see the current hours value inside the console window of your browser (Ctrl + Shift + K). If you can see the current hours value, it means DayNightDisplay is working correctly and it is able to access the state.hrs value from inside the component.

Now that you can access the current hours value from the DayNightDisplay component, you can next determine whether it’s day or night by writing some logic inside the component.

Leave a Comment