React JSX selectively pass attribute to component

Question

This code works but I cannot help but think there's a better way of doing it. I cannot set expanded to false because the component breaks when I do (like they do in Set JSX attribute based on another JSX attribute react )

Also, I need to add more condition branches and it will mean duplication of code

if (itemProps.Expanded == true) {
  return (
    <Accordion expanded={true}>
    ...
    </Accordion >
  )
}
else {
  return (
    <Accordion>
    ...
    </ Accordion>
  )
}

Any suggestions?

Answer 1

You can create props object dynamically and pass the props with ...(spread)

const props = itemProps.Expanded == true ? { expanded: true } : {};
return <Accordion {...props}>...</Accordion>;

Answer 2

Sorry guys tried this and it worked. Thank you for your time

let expanded = undefined;
if (itemProps.Expanded) {
  expanded = true;
}

return (
    <Accordion expanded={expanded}>
    ...
    </Accordion >
)
```