[React] IF MAIS SIMPLES NO REACT JS PARA EVITAR REPETIÇÃO DE CÓDIGO

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!

Continue reading...