How can I specify the structure of a <div> conditionally in JSX?-CodePudding

I'm trying to create responsive HTML inside a React return() statement, but every way I turn, my code is errored in VSCode. One example of my numerous efforts to structure this (and the one recommended by chatGPT) is:

<div>
    {props.platform === "desktop" ? <div className="displaydiv"> : <div>}
    </div>
</div>

In this case, the first is errored by VSCode as having no closing tag.

I'm unsure whether or not this code would actually run, ie whether the problem might just be over-enthusiastic VSCode checking. But even if this is the problem, this is no help to me as these errors will obscure genuine errors in my project.

CodePudding user response：

No, ternary on just the opening tag won't work. You can put it on the required attribute:

<div className={props.platform === "desktop" ? "displaydiv" : ""}>
</div>