import React, { Component } from "react";

import Plot from "react-plotly.js";
import PostData from "./EngineData3D.json";
 class EngineData3D extends Component {

PostData = this.PostDataPostData.map((postDetail, index) => {
    return <div>
        x: {postDetail.AFR}
        y:{postDetail.engine_load}

    </div>
}
)
render() {

    return (
        <div>
            <Plot />
            data={
                [
                    {
                        type: 'bar',
                        mode: 'lines',
                        x: this.PostData(this.state.postDetail.AFR)['x'],
                        y: this.PostData(this.state.postDetail.engine_load)['y'],
                        marker: { color: 'pink' }
                    }
                ]
            }
            layout ={{ width: 1000, height: 500, title: 'Engine Data' }}


        </div>
        )
    }
}
export default EngineData3D

And my Json file name is EngineData3D.json is at the same folder with the .js file.

I am trying to use the data in the .json file to visualize data to have a plot using react-plotly.js

I am new with plotly , I would be grateful if you help me correct my .js code.