Language object prop to pass in the react component

Question

I have created a demo using a tutorial that i have found.

This is the demo => https://codesandbox.io/s/strange-monad-otv0g?file=/src/language.js

In App.js the sidebar is receiving the array of objects as props, it all works fine

  const sidebaritems = [
    {
      name: "first",
      label: "First",
      items: [
        { name: "sublink2", label: "SubLink 1" },
        { name: "sublink3", label: "SubLink 2" }
      ]
    },
    "divider",
    {
      name: "second",
      label: "Second",
      items: [
        { name: "subLink 1", label: "SubLink 1" },
        { name: "subLink 2", label: "SubLink 2" }
      ]
    },
    "divider",
    {
      name: "third",
      label: "Third"
    }
  ];




<SideBar items={sidebaritems} />

I want now to use an external data language file that i import where i have other translations and also sidebaritems to pass, so i have created language.js and imported in the App.js

import dataForTexts from "./language.js";

My question is, how can i pass from language.js the same sidebaritems in my sidebar component in app.js

you want to merge both the `sidebaritems` and the list from the language.js ? — Shyam, Jun 02 '21 at 09:22
only passing the sidebaritems or if you have a better way to do, you can show me — Koala7, Jun 02 '21 at 09:23
It's not a default export so you need `import { dataForTexts } from "./language.js";` (note the curly braces). Then use `` — , Jun 02 '21 at 09:24
i get this => Cannot read property 'sidebaritems' of undefined, if you can post your answer and show me in the demo, i accept it — Koala7, Jun 02 '21 at 09:31
Duplicate: [How to import and export components using React + ES6 + webpack?](https://stackoverflow.com/questions/33956201/how-to-import-and-export-components-using-react-es6-webpack) — , Jun 02 '21 at 09:39

score 1 · Accepted Answer · answered Jun 02 '21 at 09:34

1

You need a named import to import your dataForTexts . So change your import statement as

import { dataForTexts } from "./language.js";

Now pass the sidebaritems as

<SideBar items={dataForTexts.sidebaritems} />

answered Jun 02 '21 at 09:34

Shyam

5,292
1
10
20

score 0 · Answer 2 · answered Jun 02 '21 at 09:27

0

As I understand it you need this. As items, you just need to pass your data from language.js (dataForTexts)

answered Jun 02 '21 at 09:27

n7y

92
3

This won't work (see my comment). Also, please don't post images of code; post code. – Jun 02 '21 at 09:28

Language object prop to pass in the react component

2 Answers2