I don't know how to change the background color dynamically

JavaScript
1

Link: https://codepen.io/LouisPetrich/pen/jOWYJeZ

In the javascript, I have an array of strings (hex codes), and I have a component with a method that assigns one of these strings to the state. I don’t know how to use that state to change the CSS.

  1. I tried to change the CSS with in-line styles, but that didn’t work. I don’t know why!

  2. I tried using document.getElementById("mount-node").style.backgroundColor = . . . but I don’t know how to use that dynamically

I would very much appreciate any guidance here. This is my first project working with html, javascript, and react together. I understand them individually, but those three separate windows at the top of codepen confuse me! :stuck_out_tongue_closed_eyes:

2

Hello there,

If all you are wanting is some random colour upon every push of the new quote button, then change the colors to have # included and use inline styles as you said:

style={{"background-color": this.state.color}}

Also, remember that JSX elements do not have a class attribute…

Hope this helps

1 Like
3

Try “#BEB8EB”, instead of “BEB8EB”. You need the # in the colors array.