import React, { useEffect } from "react";
import axios from "axios";

const WasteType = (props) => {
 const mostMatched = props.data[0];
 const allLabels = props.data;
 // const sortedLabels = allLabels.map((elem) => elem.label).sort((a, b) => a.localeCompare(b));

 useEffect(() => {
 sendWaste();
 }, []);

 const sendWaste = async () => {
 const wasteType = mostMatched.label;
 const accuracy = mostMatched.confidence;
 await axios
 .post("http://localhost:8000/api/prediction/",{
 wasteType:wasteType,
 accuracy:accuracy
 })
 .then((response) => {
 console.log(response.data);
 })
 .catch((error) => {
 console.error(error.message);
 });
 };

 return (
 <>
 
 {allLabels.map((props) => (
 * {props.label}  
{((props.confidence) \* 100).toFixed(3)}

 ))}
 

 </>
 );
};

export default WasteType;

Fix the code it is throwing 400 error in axios
user