Changing background color based on state, using inline styling.

What is state? In React, the state of a component is an object that holds some information that may change over the lifetime of the component. Props are variables that are passed to a component from its parent. State is often set by a parent component and then passed down to the child components. In the following example, our parent component is making a fetch call to the Colormind.io API, and then setting the state of “colors” to be equal to the resulting array of RGB values. Our end goal is to display a singular RGB code on a card, with a background color dependent on the RGB values that are passed to the card component, via props.

Our file structure includes the following: App.js, ColorsDiv.js and Card.js. App is a class component, while ColorsDiv and Card are both functional components. When each one is built, it will also need to have an “export default” either at the beginning or end of the function. I like to keep mine at the beginning, like so:

export default class App extends Component{}
export default function ColorsDiv(){}

First, in our App component, we need to create a state of colors which points to an empty array, so that the state has somewhere to live:

state = {
colors: []
}

Next, we fetch the data from the baseURL (“http://colormind.io/api/") inside of a componentDidMount() function. That means, when our component “mounts” to the DOM, meaning the app loads or starts up, the fetch will happen. This API returns a random set of five RGB codes, so the data will be different each time the page is refreshed.

componentDidMount(){
fetch(baseURL, {
method: 'POST',
body: JSON.stringify({
model: 'default'
})
})
.then(response => response.json())
.then(colors => {
this.setState({ colors: colors.result })
})
};

You can see that at the end of the fetch, we set the state of colors using this.setState. It is helpful to console.log() during this process to that you can make sure your state is set to the correct data, and not the entire object you have returned from your fetch. Here, we set the state of colors equal to colors.result, which is the whole array of RGB codes. This state of colors is then passed down to child component <ColorsDiv /> inside the render() function as {this.state.colors}:

render(){
return (
<div className="App">
<ColorsDiv colors={this.state.colors}/>
</div>
);
}

Before we move on, we must also import ColorsDiv at the top of App, so that it will be available to pass this data to:

import ColorsDiv from './ColorsDiv'

This must be done on EVERY parent component for EVERY child with which it is sharing state and props! If the component is not imported, it does not exist to the parent component.

If the child (ColorsDiv) is a functional component, which it is, it then imports the props inside the function’s argument with the following syntax:

function ColorsDiv(props){}

Importing the props like this means that we call them with this syntax: {props.colors}. However, there is a further step we can do here to make this easier for ourselves: destructuring. If we import the props like this:

function ColorsDiv({colors}){}

Then we can simply type {colors} instead of {props.colors} whenever we want to access these props.

The next step, inside of ColorsDiv, is to create a function to display each color individually. Right now, the state of {colors} is a nested array of five RGB codes. We need to map over “colors” to return “color,” and then pass that state to our Card file, so that each card will display just one RGB code:

const displayColors = () => colors.map(color => {
return <Card color={color} />
})

Make sure you have imported Card at the top of the ColorsDiv page, so that we can pass the props in the return! Now that we have built this function, we need a place to call it. This goes in the return() of this ColorsDiv function, like so:

return (
<div className="colors-set">
{displayColors()}
</div>
)

Now that we have the state of {color} like we want it, and it is passed down with props to the Card component, we can tell our app how we want to display this data. Our div to display our cards will go inside of Card function’s return, and will contain a <p> tag. Like so:

export default function Card({color}){
return(
<div className="colorCard">
<p> <p>
</div>
)
}

To display the RGB code inside of the <p> tag, we need to access each value so that it can be displayed. Because {color} right now is an array of 3 numbers, we access each of those numbers with their position in the array (remember that the first position is 0):

<p className="card"> RGB: {color[0]}, {color[1]}, {color[2]} </p>

Now, if we saved and viewed our page in the browser, it would have a list of plain text RGB codes, that look something like this (minus quotes): “33, 42, 48” “158, 151, 151” and so on. Our next step is to give each of these “cards” a background color, which we can achieve using props, interpolation and in-line styling. To achieve this, we simply edit the <div> that is holding our <p> tags to have a style of backgroundColor, which points to an interpolated RGB code:

<div className="colorCard" style={{backgroundColor: `rgb(${color[0]}, ${color[1]}, ${color[2]})`}}>

It is pertinent to use back-ticks `` instead of quotes in order for the interpolation to be read correctly by JavaScript.

Now you have some un-styled, thin cards that traverse the width of your page, with a background color that matches the RGB code that they also display! A small amount of CSS will get the cards to display is a more satisfying way: flexbox. You may have noticed that we assigned a className to the <div> which contains the displayColors() function, <div className=’colors-set’>. Now, in your CSS file, add the following code to display this div as flexbox:

.colors-set {
display: flex;
flex-flow: row nowrap;
justify-content: center;
}

Some further styling on the .colorCard class would allow for even better design in this case.

The CliffNotes version:

1. Set the state of colors to be equal to the nested array that we returned from our fetch call.
2. Pass the state of colors to the ColorsDiv component.
3. Write a function called displayColors() that maps over colors to return a singular color. In its return, pass the state of color={color} to the Card component.
4. Call displayColors() in the return of ColorsDiv.
5. In Card component, assign the text for each color code to the <p> tag.
6. Also in Card component, add a style to the <div> that assigns the background color to be an rgb() code, with our figures interpolated into it.
7. Style it up if you want to!

Happy coding!