0
133
VisualizaçõesI want to add 2 const arrays in 1 file of React JS. For example is below
I Want to add 2 array const in 1 file in React JS.
I want to print Breakfast Menu when a link is selected and Lunch Menu similarly but I want to keep them in 1 file
I didn't change the name of Note file because it gave an error of file not found
This is my GitHub repo: https://github.com/mareyam/Maryam-s-Company-Menu
And here is my project structure:
Note file
const BreakfastMenu = [
{
id:1,
h:"Eggs",
p:"eggs",
},
{
id:2,
h:"Milk",
p:"milk",
}
]
const LunchMenu = [
{
id:1,
h:"Tomato",
p:"eggs",
},
{
id:2,
h:"Milk",
p:"milk",
}
]
export default {BreakfastMenu, LunchMenu};
breakfast file
import React from 'react';
import BreakfastMenu from "./BreakfastMenu";
import Menu from "./Menu";
function nCard(val)
{
return(
<Menu
h={val.h}
p={val.p}
/>
);
}
const Breakfast = (props) =>
{
return (
BreakfastMenu.map(nCard)
)
}
export default Breakfast;
3 Respostas
Responde à pergunta0
Use exports as follows
// Note.js
const BreakfastMenu = [
{
id:1,
h:"Eggs",
p:"eggs",
},
{
id:2,
h:"Milk",
p:"milk",
}
]
const LunchMenu = [
{
id:1,
h:"Tomato",
p:"eggs",
},
{
id:2,
h:"Milk",
p:"milk",
}
]
export {BreakfastMenu, LunchMenu};
Then do the imports as follows.
import { BreakfastMenu } from "./Note";
import { LunchMenu } from "./Note";
0
You will need to setup webpack in order to use import export
And then change your export/import like so:
Note file
export { BreakfastMenu, LunchMenu };
And to import:
import { BreakfastMenu, LunchMenu } from "./Note";
Working example:
0
export const BreakfastMenu = [
{
id:1,
h:"Eggs",
p:"eggs",
},
{
id:2,
h:"Milk",
p:"milk",
}
]
export const LunchMenu = [
{
id:1,
h:"Tomato",
p:"eggs",
},
{
id:2,
h:"Milk",
p:"milk",
}
]
SInce they are multiple arrays there can be one default but better still still export each of the array or function from the start. Then In your import you can use curly brackets to access the functions or array block
import { BreakfastMenu, LunchMenu } from "./Note";
This works with multiple functions in the same JS file too.