How to Export Multiple List in ReactJS?

Question

import React from 'react';

var nav1 = [
    "SERVICE APP",
    "ONLINE ORDER:+91 7303434043",
    "CONTACT US",
    "STATUS LOCATOR",
    "MUMBAI",
    "TRACK ORDER",
]

var nav2=[
    {
        'title':"HAFELE KARIA",
        'image': "./images/img1."
    },
    {
        'title':"BOAT WATCH",
        'image': "./images/img2."
    },
    {
        'title':"SONY TV",
        'image': "./images/img3.",
    },
    {
        'title':"WASHING MACHINE",
        'image': "./images/img4."
    },
    {
        'title':"AIRPODS PRO",
        'image': "./images/img5."
    },
    {
        'title':"JBL",
        'image': "./images/img6."
    },
    {
        'title':"LG OFFER",
        'image': "./images/img7."
    },
    {
        'title':"LG BUY FROM HOME",
        'image': "./images/img8."
    },
    {
        'title':"PLAYSTATION 5",
        'image': "./images/img9."
    },
    {
        'title':"OPPO RENO",
        'image': "./images/img10."
    },
]
export default {
    nav1,
    nav2,
}

Here I have 2 lists one is for the navbar-1 and the second list is for navbar-2. This is my 'data.js' code and I want to export these 2 list but I am not able to do it so!

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

import React from 'react';
import './index.css';
import nav1img from "./images/nav1.png";
import { FaMobileAlt } from 'react-icons/fa';
import nav1 from './data';
import nav2 from './data';

const Navbar1 = () => {
    console.log(nav2);
    return (
        <div className="row1">
            <div className="left">
                <img src={nav1img} alt="Product" />
            </div>
            <a href="#"><FaMobileAlt className="icon1" /></a>
            <div className="right">
                {
                    nav1.map((item, index) => {
                        return <>
                            <a href="#" key={index}>
                                {item}
                            </a>
                            <h1>|</h1>
                        </>
                    })
                }
            </div>
            
        </div>

    );
}

export default Navbar1;

And This is my component where I am not able to import the first and second list

How should I export and import the nav1 and nav2 lists?

Giovanni Esposito · Accepted Answer · 2021-07-09 14:19:57Z

1

Usually I do:

data.js

export const nav1 = [...];
export const nav2 = [...];

Then in component:

import { nav1, nav2 } from '../path/to/data';

answered Jul 9, 2021 at 14:19

Giovanni Esposito

11.3k1 gold badge19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Thompson · Accepted Answer · 2021-07-09 14:28:57Z

Export/import syntax can be confusing at first, and exporting objects makes it even more confusing by mixing some object syntax in.

There are two types of imports/exports - named and default.

Default

export default Thing;
*********************
import Thing from 'path/to/thing'

You can rename Thing to be anything you want when importing.

Named

export Thing;
*********************
import { Thing } from 'path/to/thing'

Here you must use the curly brackets and name it Thing.

Your scenario

You are using a default export, and exporting an object.

const obj = {
  nav1: [1,2],
  nav2: [3,4]
};
export default obj;

To import it, you need to use the default import syntax:

import obj from 'path/to/obj'

Then you have the object to access your lists from:

obj.nav1

Alternative

If you want to simplify, you could just use 2 named exports and import them separately like you are currently trying to do:

export { 
  nav1,
  nav2,
};

import { nav1 } from './data';
import { nav2 } from './data';

You can read more about exports in the MDN docs.

Collectives™ on Stack Overflow

How to Export Multiple List in ReactJS?

2 Answers 2

Comments

Your scenario

Alternative

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Your scenario

Alternative

Comments

Your Answer

Sign up or log in

Post as a guest

Related