React style syntax question

1

I was reading this example of how to make a modal in React, when I encountered this code inside a render() method:

return (
  <div className="backdrop" style=>
    <div className="modal" style=>
      {this.props.children}
    </div>
  </div>
);

Earlier in the code, he defines two style classes (contents cut for brevity):

const backdropStyle = {};
const modalStyle = {};

So my question is this: why doesn’t he assign these classes to the style attribute of the .backdrop or .modal divs?

Is this being automatically assigned based on the class name? Or did he just make an error.

2

It looks like an error, but since the definitions are empty, would there be any difference? Besides the obvious extensibility problem, I mean.

1 Like
3

Sorry if I was unclear. The style objects are defined on the linked page. I cut those out for brevity so the actual question would come to the fore. I know there are funky syntaxes all over, so I was wondering if there was some autocomplete going on where if a component had a class defined as className=<classname>, writing style= with no assignment was akin to writing style={<className>+Style}

4

Ah, that seems the Dave Ceddia’s tutorial, i went through that too :grin:
That doubt caught me aswell and yes, it’s a typo. You can check it by watching his code ( download, github or some other link if i remember correctly )^^

1 Like
5

Yup. Went to the github page, and you are correct. In the past, by not assuming I was looking at a typo, I have learned about things like arrow functions (which I love now) and destructuring objects. I kinda love them now, so I thought I had stumbled across more shorthand. Thanks, @lynxlynxlynx and @Layer. You guys always have useful insights when I run across you in other threads, and it feels great to be on the receiving end of salient help when I think I’m going crazy.

1 Like