Skip to content

Proper way to perform an API call inside div?

So I am currently trying to display data in a table. This data is from 2 separate tables in the database with foreign keys. I get my list using this call:

    setlistofStores( //State which contains the response from the API request
  }, []);

So I can get the list of Stores and can display them in the table with no issue using this code:

      {listofStores.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row) => (
        <TableRow key={row.tenantName}>
              <Grid container>
                  <Grid item lg={2}>
                      <Avatar alt={row.unit} src='.' className={classes.avatar}/>
                  <Grid item lg={10}>
                      <Typography className={}>{row.unit}</Typography>
                    flex: 'center',
                    ((row.industry === 'Apparel' && 'purple') ||
                    (row.industry === 'F&B' && 'grey') ||
                    (row.industry === 'Admin' && 'red') ||
                    (row.industry === 'Tech' && 'blue'))
            <TableCell className={classes.stores}>1</TableCell>
            <TableCell ><button className={classes.viewButton} onClick={()=>{navigate(`/store/${}`)}}>View</button></TableCell>

Now I want to run this API inside each row to use the Tenant to display its data:

useEffect(() => {
 axios.get(`http://localhost:3001/store/byId/${id}`).then((response) => {
 }, []);

What is the correct way to do this?


useEffect with empty dependencies is the good one for your situation. You can create a new component for details and by clicking, navigate the user to that component (page). And there you can call the API for details. (or it can be a pop-up. It really depends on your UI design)

const TenantDetails = ({ tenantId, ...props }) => {
  const [tenantData, setTenantData] = useState(null);
  useEffect(() => {
    axios.get(`http://localhost:3001/store/byId/${tenantId}`).then((response) => {
  }, []);

  return (
    // your UI implementation
      tenantData ? <div> ... </div> : <div>loading</div>