How to fetch data from database and map into react?

Question

Data is coming from the database is perfectly fine But I don't know how to map that data or how to call that specific column that comes from the database. This is the output that console shows me, Data is coming

Any suggestions, please. It would be better if anyone solves this with code.

Rendering Function

  const [products,setProducts] = useState({});

  const classes = useStyles();

  useEffect(()=>{
    axios.post('/UserPortal/CartItems/checkout_details_summary.php' , {
        customer_id: localStorage.getItem('Id'),
    } )
    .then((response) => {
        console.log(response.data);
        setProducts(response.data);  
        

    })  
  },[])
 

Return

 return (
    
    <React.Fragment>
      <Typography variant="h4" gutterBottom>
        Order summary
      </Typography>
     
     
      <List disablePadding>
   
          <ListItem className={classes.listItem}  key={products.name} >
           <ListItemText secondary={'x'  + products.quantity   }>
                <Typography variant="h4" gutterBottom>
                  {products.name}  
               </Typography> 
             </ListItemText>  
              <Typography variant="h5"> {products.total} </Typography>
           </ListItem>
         
       
        <ListItem className={classes.listItem}>
          <ListItemText> <Typography variant="h4" gutterBottom>Total</Typography></ListItemText>
          <Typography variant="h5" className={classes.total}>
            {'Rs. '  + products.net_total  }
          </Typography>
        </ListItem>
   
      </List>
</React.Fragment>
);

Here is my PHP code

<?php

require 'connect.php';

$postdata = file_get_contents("php://input");

if(isset($postdata) && !empty($postdata))
{
    $request = json_decode($postdata);
    
    $customer_id = $request->customer_id;

    $sql = ("SELECT * FROM `checkout_details` WHERE `customer_id` = '{$customer_id}' LIMIT 1");

    
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);
echo $json = json_encode($row);

}

Answer 1

I think your const [products,setProducts] = useState({}); should be an array of objects const [products,setProducts] = useState([]); .

Then you can iterate over it with .map method. You can access the key of each Object destructuring params like this for example:

return (
    
    <React.Fragment>
      <Typography variant="h4" gutterBottom>
        Order summary
      </Typography>
     
     {products.map(({ name, total, net_total }) => 
      <List disablePadding>
   
          <ListItem className={classes.listItem}  key={products.name} >
           <ListItemText secondary={'x'  + products.quantity   }>
                <Typography variant="h4" gutterBottom>
                  {name}  
               </Typography> 
             </ListItemText>  
              <Typography variant="h5"> {total} </Typography>
           </ListItem>
         
       
        <ListItem className={classes.listItem}>
          <ListItemText> <Typography variant="h4" gutterBottom>Total</Typography></ListItemText>
          <Typography variant="h5" className={classes.total}>
            {'Rs. '  + net_total  }
          </Typography>
        </ListItem>
   
      </List>
    )}
</React.Fragment>
);