Inline CSS in react

Question

{
       <div style={{color: 'red', padding-left: '30px',padding-top: '10px' }}>
        errorMessage
       </div>
}

JSX expressions must have one parent element

no error expected when using the inline css

The error is in the code wrapping `{}`. Please show whole thing — Konrad, Apr 18 '23 at 06:54

score 1 · Accepted Answer · answered Apr 18 '23 at 07:12

div element must be wrapped with React Fragment or another jsx element, not {}. Like this;

<>
  <div style={{color: 'red', padding-left: '30px',padding-top: '10px' }}>
     errorMessage
  </div>
</>

or

<React.Fragment>
  <div style={{color: 'red', padding-left: '30px',padding-top: '10px' }}>
     errorMessage
  </div>
</React.Fragment>

or

<div>
  <div style={{color: 'red', padding-left: '30px',padding-top: '10px' }}>
     errorMessage
  </div>
</div>

1 Answers1