如何有条件地在jsx中添加一个属性

Question

I have a simple material UI RadioGroup code which i want to display conditionally in row and column, default mode is column, Below is my code

 <RadioGroup
  aria-label="gender"
  name="gender1"
  value={value}
  onChange={handleChange}
>
  <FormControlLabel value="female" control={<Radio />} label="Female" />
  <FormControlLabel value="male" control={<Radio />} label="Male" />
  <FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>

Now in order to display it in row, i need to add one poperty row at RadioGroup like below

<RadioGroup
  row
  aria-label="gender"
  name="gender1"
  value={value}
  onChange={handleChange}
>

How can i just update one line conditionally? Here is codesandbox link

Answer 1

Create an isRow state and use it's value to conditionally render RadioGroup as row or otherwise

const [isRow, setIsRow] = useState(true);

<RadioGroup
  row={this.state.isRow}
  aria-label="gender"
  name="gender1"
  value={value}
  onChange={handleChange}
>