How to use Config Objects in components in React.js?

If you look at the code you’ve written inside DayNightDisplay.js, there should be a way to combine the text “It’s day!” with the image “day.png” and the text “It’s night” with “night.png”.

This is a very appropriate situation to learn about Config Objects in Javascript.

Right after the import statements, write down the following configuration object in DayNightDisplay.js:

const dayConfig = {

    day: {
       text: "It's day",
       image: "day.png"
    },

    night: {
       text: "It's night",
       image: "night.png"
    }

};

Next up, inside the getDay() function, make the following changes:

const getDay = hours => {

    // determine whether it's day or night

    // based on hours group

    if (hours >= 7 && hours <= 17 ){
    return dayConfig.day.text;
    } else {
    return dayConfig.night.text;
    }

}

To access the value of day text, you’re using dayConfig.day.text. Similarly for image path, you’re using dayConfig.day.image. With this, you’re able to group the similar objects in a better way.

This also helps you to get dynamically generated value and assign it to static variables. Let’s say the value of myValue can either be “day” or “night”. And if you use dayConfig[myValue], you’ll get a set of day values (both text and image) or night values (both text and image). You can further store them in separate variables like this:

const { newText, newImage } = dayConfig[myValue];

And in the DayNightDisplay functional component, make the following changes:

const DayNightDisplay = props => {

    // convert hours from string to integer
    const hours = parseInt(props.hours, 10);

    // store the returned value in rightNow
    const rightNow = getDay(hours);

    let imageURL = "";

    // get proper image
    if (rightNow === dayConfig.day.text)
           imageURL = dayConfig.day.image;
    else
           imageURL = dayConfig.night.image;

    // console out rightNow value
    console.log(rightNow);

    return <div>
       <div>
           <img alt="Day Night" src={imageURL}/>
       </div>

       <div>
           {rightNow}
       </div>

    </div>;
};

Save the files, and everything should work just fine.