Prediction.js

import { render } from '@testing-library/react';
import './Prediction.css';
import BarChart from './BarChart';
import PredictionTab from './Tabs';
function Prediction(props) {
    console.log(props.data);
    const bar = <BarChart data={props.arr} barColour="#AAA"/>
    const properties = Object.entries(props.data.prediction.properties);
    const tabList = properties.map(function(x) {return {name: x[0], content: <BarChart data={x[1]}/>};});
    //return (tabList[1][0]["content"]);
    const color = "green";
    return (

    <div className="Prediction">
        <div className="UpperPrediction">
            <div className="Image">
                <img 
                src={props.img}
                alt={props.label}
                />
            </div>
            <div className="Label">
                <h1 style={{color:color}}>{props.data.prediction.predicted_class}</h1>
                <p>
                    The model saw a PREDICTED_CLASS and it is CONSISTENCY with the expert knowledge.
                    ----------------- ---------------- ---------------------- -------------------
                </p>
            </div>
        </div>
        <div className="LowerPrediction">
            <PredictionTab  tabList={tabList}/>
        </div>
    </div>
    );
}

export default Prediction;