Prediction.js

import { render } from '@testing-library/react';
import './Prediction.css';
import BarChart from './BarChart';
import PredictionTab from './Tabs';

function TextExplanation(props) {
    const isConsistent = props.data.isConsistent;
    const predictedClass = props.data.predictedClass;
    const predictionColor = isConsistent ? "green" : "red";
    return (
        <div className="Label">
            <h1 style={{color:predictionColor}}>{predictedClass}</h1>
            <p>
                The model saw a {predictedClass} and it is {isConsistent ? "consistent" : "not consistent"} with the expert knowledge.
            </p>
            <p>
                ADD PROPERTIES EXPLANATIONS
            </p>
        </div>
    )
}

function Prediction(props) {
    const properties = Object.entries(props.data.prediction.properties);
    console.log(properties[0][1])
    const tabList = properties.map(function(x) {return {name: x[0], content: <BarChart data={x[1]}/>};});
    return (

    <div className="Prediction">
        <div className="UpperPrediction">
            <div className="Image">
                <img 
                src={props.img}
                alt={props.label}
                />
            </div>
            <TextExplanation data={props.data.prediction} />
        </div>
        <div className="LowerPrediction">
            <PredictionTab  tabList={tabList}/>
        </div>
    </div>
    );
}

export default Prediction;