Parsing error in React class Component while using condition - reactjs

Question

I get this Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? error while everything in my Component is set up correctly. I have double-cheked everything and there seems to be nothing wrong. Collapse component is highlighted in error message. What have i done wrong or what could cause error here?
Code part with error:
return (
<div>
{
isAuthenticatedAndIsCoach ?
<h2>Lisa</h2>
<Collapse defaultActiveKey={['0']} onChange={callback} style={{ marginBottom: '10px', borderRadius: '10px'}}>
<Panel header="Valige treeningu asukoht kaardilt" key="1">
<Map />
</Panel>
</Collapse>
<CustomForm
requestType="post"
trainingID={null}
btnText="Loo treening"/>
: <span>Teil puudub vastav luba postitamiseks</span>
}
</div>
)

Answer 1

You should wrap JSX returned by ternary condition with React.Fragment (or <>) as React expects a single element each time a render function is executed.
https://en.reactjs.org/docs/fragments.html
return (
<div>
{isAuthenticatedAndIsCoach ? (
<>
<h2>Lisa</h2>
<Collapse
defaultActiveKey={["0"]}
onChange={callback}
style={{ marginBottom: "10px", borderRadius: "10px" }}
>
<Panel header="Valige treeningu asukoht kaardilt" key="1">
<Map />
</Panel>
</Collapse>
<CustomForm
requestType="post"
trainingID={null}
btnText="Loo treening"
/>
</>
) : (
<span>Teil puudub vastav luba postitamiseks</span>
)}
</div>
);