Estoy creando dinámicamente una lista a partir de una llamada API en mi backend.

data && data.map( business => BusCard(business) ) donde data contienen una lista gigante de empresas de una llamada API.

En mi interfaz gráfica de usuario, quiero poder seleccionar un elemento para procesarlo más tarde en otras funciones (cambiar el color del borde del elemento seleccionado, obtener reseñas comerciales, calificaciones, etc.). Solo pude hacer que la selección funcionara, pero creo que la forma en que lo estoy haciendo aquí es muy complicada.

Necesito algunos consejos sobre cómo debo hacer esto.

A saber

 function setBusiness() { currentBusiness = item; }

y el onClick personalizado simplemente lo llamo así. Para configurarlo. <Box ... onClick={setBusiness}>

Llamo a esta función cada vez que necesito obtener el elemento que se seleccionó.

 export function getCurrentSelectedBusiness() { return currentBusiness; }

Mi "BusCard" personalizada que muestra la información de un negocio.

 import { AspectRatio, Box, Image} from "@chakra-ui/react"; import React, {useState} from 'react'; let currentBusiness = ""; export function getCurrentSelectedBusiness() { return currentBusiness; } function BusCard(item) { function setBusiness() { currentBusiness = item; } return( <Box p="4" maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden" mt={6} onClick={setBusiness}> <AspectRatio maxH="100px"> <Image src={item.image_url} alt={item.alias} size="sm" /> </AspectRatio> <Box p="2"> <Box mt="1" fontWeight="semibold" as="h4" lineHeight="tight" alignItems > {item.name} <br /> {item.review_count} Reviews </Box> <Box display="flex" alignItems="baseline"> <Box color="gray.500" fontWeight="semibold" letterSpacing="wide" fontSize="xs" textTransform="uppercase" ml="5" > {item.location.display_address} <br /> {item.phone} </Box> </Box> </Box> </Box> ) } export default BusCard;