Currently, I am working on a project where I need to load or input multiple data.js files into my React JS application. Specifically, I have dataCPU.js, dataGPU.js, and around 7 others. Here is the code snippet for reference:
App.js
import Header from './components/Header';
import Main from './components/Main';
import Builder from './components/Builder';
import {useState} from 'react';
import dataRAM from './dataRAM';
function App() {
const {products} = dataRAM;
const [builderItems, setBuilderItems] = useState([]);
const onAdd = (product) => {
const exist = builderItems.find(x => x._id === product._id);
if(exist){
setBuilderItems(
builderItems.map(x =>
x._id === product._id ? {...exist, qty: exist.qty+1} : x
)
);
}else{
setBuilderItems([...builderItems, {...product, qty: 1}])
}
}
const onRemove = (product) => {
const exist = builderItems.find((x) => x._id === product._id);
if(exist.qty === 1) {
setBuilderItems(builderItems.filter((x) => x._id !== product._id));
} else{
setBuilderItems(
builderItems.map(x =>
x._id === product._id ? {...exist, qty: exist.qty-1} : x
)
);
}
}
return (
<div className="App">
<Header countBuilderItems={builderItems.length}></Header>
<div className = "row">
<Main
onAdd={onAdd} products={products}>
</Main>
<Builder
onAdd={onAdd}
onRemove={onRemove}
builderItems = {builderItems}
></Builder>
</div>
</div>
);
}
export default App;
dataRAM.js
const dataRAM = {
products: [
{
_id:'1',
name: 'Adata 4GB DDR4 2666 DIMM Desktop Memory',
speed: '2666mhz',
modules: '1x4gb DDR4',
casLatency: 17,
price: 1399,
store: 'store-y',
image: '/images/RAM/Adata-4GB-DDR4-2666-DIMM-Desktop-Memory.jpg'
},
...
// Other RAM data entries here
]
}
export default dataRAM;
I have various types of data.js files and I am looking for guidance on how to upload or input them into my React app. Any help or advice would be greatly appreciated. Thank you!