I want to add 2 const arrays in 1 file of React JS. For example is below

user_14878550 0
Viewed 601

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:

enter image description here

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;
reactjs javascript
3 Answers

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";
user_76156230

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:

Edit heuristic-raman-of93f

user_51226150 
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.

user_161746490
Related