Tal como dice el título, estoy transmitiendo datos de pokemon y datos de rickandmorty. También estoy usando el menú de selección de viento de cola para reaccionar, eso es bastante largo. ¿Hay una mejor manera de hacerlo que mapear condicionalmente a través de los datos? sé que puedo hacerlo
{pokemons ? ( {pokemons?.map((pokemon, idx) => ( **30 line long code for the select menu** ))} ) : ( {rickAndMorty?.map((character, idx) => ( **Another 30 long line code for the select menu** ))} )}¿Es esta la única forma de hacerlo o hay una forma más limpia? Cualquier ayuda sería muy apreciada. ¡Gracias!
Sugiero intentar separar cualquier código duplicado en algún componente genérico, como:
const GenericSelectItem = (props)=>{ return (<>{/* props.itemValues */}</>); }; const GenericSelectList = (props)=>{ const { selectItems } = props; return (<SelectList> { selectItems.map( selectItem => <GenericSelectItem selectItem={ selectItem } /> ) } </SelectList>); }; const Example = (props)=>{ const itemsToDisplay = pokemons || rickAndMorty; return (<> { !itemsToDisplay ? null : <GenericSelectList selectItems={ itemsToDisplay } /> } </>); };En caso de que los SelectItems sean muy diferentes, agregue componentes específicos, como:
const PokemonItem = (props)=>{ return (<GenericSelectItem>{/* pokemon specific variations */}</GenericSelectItem>); }; const RickAndMortyItem = (props)=>{ return (<GenericSelectItem>{/* rickAndMorty specific variations */}</GenericSelectItem>); };