I am dynamically creating a list from an API call on my backend.

data && data.map( business => BusCard(business) ) where data contains a giant list of businesses from an API call.

On my gui I want to be able to select an item to process it later in some other functions (change border color of selected item, get businesses reviews, ratings, etc...). I was only able to get the selection working, but I think the way I am doing it here is very hacky.

I need some pointers on how I should go about doing this.

Namely

  function setBusiness() 
  {
    currentBusiness = item;
  }

and the custom onClick I just call that. To set it. <Box ... onClick={setBusiness}>

I call this function whenever i need to get the item that was selected.

export function getCurrentSelectedBusiness()
{
  return currentBusiness;
}

My custom "BusCard" That shows the information from a business.

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;