Eslint error: Missing parentheses around multilines JSX react/jsx-wrap-multilines

Question

I am using Material UI checkbox in my project. I used it the same way it's used in Material UI example: https://material-ui.com/components/checkboxes/ but eslint shows me this error:

error Missing parentheses around multilines JSX react/jsx-wrap-multilines

<FormControlLabel
  control={
    <Checkbox
      checked={data.default}
      value="default"
      onChange={(e) => {
        return setData({ ...data, default: e.target.checked });
      }}
    />
  }
  label="Make default"
/>

error is on the line 2 (control={....)

Answer 1

Please, see the examples on the jsx-wrap-multilines rule page:

You can either disable that rule, or wrap any multiline React element into parentheses:

<FormControlLabel
  control={( // starting paren here
    <Checkbox
      checked={data.default}
      value="default"
      onChange={(e) => {
        return setData({ ...data, default: e.target.checked });
      }}
    />
  )} // ending paren here
  label="Make default"
/>