A ALGUMA FORMA MELHOR DE DAR A SOLUÇÃO DESSE IF NO REACT?

Ola a todos. Eu estou iniciando minha caminhada no react e estou fazendo um clone do youtube. Eu cheguei numa parte onde não sei se o que eu fiz é uma boa ou má prática que gostaria de ajuda de vocês. Seguinte.

Eu tenho um componente que ao ser chamado PODE ou NÃO ser um botão.

Então quando ele é chamado eu o chamo assim:

                        <SideMenuOptions isButton={true} itemIcon={<HomeIcon/>} itemText={'Ínicio'} />

Se o boleano de botão for "TRUE" significa que ele é um botão, se não, é apenas um campo de texto.

Agora abrindo o código do componente SideMenuOptions nós encontramos:

function isButton(isButton, itemIcon, itemText) {
    if (isButton) {
        return (
            <ListItem button>
                <ListItemIcon>{itemIcon}</ListItemIcon>
                <ListItemText>{itemText}</ListItemText>
            </ListItem>
        )
    }
    return (
        <ListItem>
            <ListItemIcon>{itemIcon}</ListItemIcon>
            <ListItemText>{itemText}</ListItemText>
        </ListItem>
    )

}

export default function SideMenuOptions(props) {
    return (
        <>
            {isButton(props.isButton, props.itemIcon, props.itemText)}
        </>
    )
}

Ou seja, o componente SideMenuOptions returna uma função, que ao executada ela verifica se a propriedade isButton é verdadeira ou não. Para um item ser um botão, basta eu informar no a propriedade Button, mas ela necessariamente precisa ter aqueles childrens.

Eu achei que esse ctrl + c ctrl + v muita repetição de código. Teria uma solução mais elaborada para o problema? Quero muito a ajuda dos senhores nisso!

function isButton(isButton, itemIcon, itemText) { return ( {isButton ? <ListItem button> : <ListItem>} <ListItemIcon>{itemIcon}</ListItemIcon> <ListItemText>{itemText}</ListItemText> </ListItem> ) } export default function SideMenuOptions(props) { return ( <> {isButton(props.isButton, props.itemIcon, props.itemText)} </> ) }

export default function SideMenuOptions(props) { return ( <> {props.isButton ? <ListItem button> : <ListItem>} <ListItemIcon>{props.itemIcon}</ListItemIcon> <ListItemText>{props.itemText}</ListItemText> </ListItem> </> ) }