How do I call my data in js file to my react component?

See more:

Javascript

data

ReactJS

I have a js file with some data with x and y-axis, for a chart. I need to display this data using react Plotly as hooks to my function.

How can I accomplish this?

What I have tried:

Here is my code so far:

data.js:
export const ScatterData = {
"data":[
{
"x": [40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480, 520, 560,
600, 640, 680, 720, 760, 800, 840, 880, 920, 960, 1000, 1040, 1080,
1120, 1160, 1200, 1240, 1280, 1320, 1360, 1400, 1440, 1480, 1520, 1560,
1600, 1640, 1680, 1720, 1760, 1800, 1840, 1880, 1920, 1960, 2000, 2040,
2080, 2120, 2160, 2200, 2240, 2280, 2320, 2360, 2400, 2440, 2480, 2520,
2560, 2600, 2640, 2680, 2720, 2760, 2800, 2840, 2880, 2920, 2960, 3000,
3040, 3080, 3120, 3160, 3200, 3240, 3280, 3320, 3360, 3400, 3440, 3480,
3520, 3560, 3600, 3640, 3680, 3720, 3760, 3800, 3840, 3880, 3920, 3960, 4000],
"y": [-11.98752097, -11.98587175, -11.9840901, -11.98657347, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678],
"type": "scatter",
"name":"logResPerm",
"mode": "lines+markers",
"marker": "{color:'red'}",
},
{ "x": [40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480, 520, 560,
600, 640, 680, 720, 760, 800, 840, 880, 920, 960, 1000, 1040, 1080,
1120, 1160, 1200, 1240, 1280, 1320, 1360, 1400, 1440, 1480, 1520, 1560,
1600, 1640, 1680, 1720, 1760, 1800, 1840, 1880, 1920, 1960, 2000, 2040,
2080, 2120, 2160, 2200, 2240, 2280, 2320, 2360, 2400, 2440, 2480, 2520,
2560, 2600, 2640, 2680, 2720, 2760, 2800, 2840, 2880, 2920, 2960, 3000,
3040, 3080, 3120, 3160, 3200, 3240, 3280, 3320, 3360, 3400, 3440, 3480,
3520, 3560, 3600, 3640, 3680, 3720, 3760, 3800, 3840, 3880, 3920, 3960, 4000],
"y": [0.20749068, 0.20891519, 0.21034543, 0.20980064, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
],
"type": "scatter",
"name":"Porosity",
"mode": "lines+markers",
"marker": "{color: 'blue'}",
}

Heres my function:

export const ScatterChart= () => {
ScatterData.data.map()
return(
<plot
data="{ScatterData}/">
)
}
export default ScatterChart

reference: href="https://plotly.com/javascript/react/

any help much appreciated! thank you!