reactjs how to style with an object instead of using in-line styling?

Question

Here is my code:

ReactDOM.render(
    <h1 style = {{color:"red"}}>Foo</h1>,
    document.getElementById("root")
)

How come this works ^ but this doesn't:

var styles = {
    color:"red"
}
ReactDOM.render(
    <h1 style = {{styles}}>Foo</h1>,
    document.getElementById("root")
)

I want to style easily without having to type each style out every time i create a new DOM element...

Answer 1

Use single brackets in your render. Like this:

ReactDOM.render(
    <h1 style = {styles}>Foo</h1>,
    document.getElementById("root")
)

The reason style={{ styles }} doesn't work is because it's the same as style={{ styles: styles }} , which passes along an object with a styles property, instead of the actual styles you defined for it.