React: why is double brace syntax, style{{..}}, required for inline styles

Question

My question involves styling react components inline.

I understand that within JSX {variableName}, braces are needed to reference any JS variable or expression.

So, adding an inline style using the following construct makes sense to me. The desired style is stored in a JavaScript variable, then referenced within the JSX "tag" as style={divStyle}

const divStyle = {
  backgroundImage: `url(${avatarURL})`,
};

function HelloWorldComponent() {
  return (
    <div className='avatar' style={divStyle}>
      Hello World!
    </div>;
  )
}

But I do not see the connection with the syntax of style={{..}} when the style is typed directly into the JSX "tag" as in the following:

function HelloWorldComponent() {
  return (
    <div className='avatar' style={{backgroundImage: `url(${avatarURL})`}}>
      Hello World!
    </div>;
  )
}

Can someone explain the logic behind the style={{..}} construct ?

I see this in docs and other reference materials, but I haven't seen any explanation, it's just passed over as though obvious.

As this was not an obvious extension of the JS expression rule to me, I was using only a single set of braces, and getting errors.

Answer 1

You're returning an object. So the outer {} brackets are for returning a variable, and the inner {} brackets are for creating an object.

Reformat it and it might make more sense:

style={
  {
    backgroundImage: `url(${avatarURL})`,
    color: #ffffff,
    fontSize: 16px
  }
}