How to access Object array file into react component?

Question

I am trying to access an object array file within src folder eg: data.js(Object array only) this file into my app.js(react component)

in first scenario 1.I have tried this problem using react in

src--[app.js(component)/data.js(object array)].

When I was run it shows me an error like

(TypeError: _data__WEBPACK_IMPORTED_MODULE_1___default.a.map is not a function)means null array/undefined.

in second scenarios 2. when I add object array in app.js within the same page its shows me perfect result. without an error but trying from another file like data.js it taking null array I have used to stringify() and JSON parser but no result

Object array file data.js ->

const datas=[
    {
    "id":"1",
    "firstname":"sam",
    "lastname":"parkar"
    },
    {
    "id":"2",
    "firstname":"julee",
    "lastname":"fransic"
    }
    ];

react component app.js ->

import React from 'react';
import  datas from './data';
import  DataInfo from './DataInfo';
function App () {
 const appdata=datas.map( inner => inner.id + inner.firstname + inner.lastname)
//print on console
 console.log(appdata)
    return (
     <div className="App">
           <p>App js page</p>

              {appdata} 

      </div>
    )
  }
export default App;

error ->

TypeError: _data__WEBPACK_IMPORTED_MODULE_1___default.a.map is not a function
  21 | return (  
  22 |   
  23 |   
> 24 |   <div className="App">  
     |  ^  25 |   
  26 |        <p>App js page</p>

actual result:-
App js page

1samparkar2juleefransic
and on console (2) ["1samparkar", "2juleefransic"] 0: "1samparkar" 1: "2juleefransic"

Sidenote: "Data" is already a plural word, "Datum" being the singular form of the word. So "Data" never takes an "s". — Monstar
– Monstar, Commented May 30, 2021 at 14:31

Vladimir Bogomolov · Accepted Answer · 2019-04-04 07:21:31Z

22

Make sure you export the datas correctly

export const datas=[
  {
    "id": "1",
    "firstname": "sam",
    "lastname": "parkar"
  },
  {
    "id": "2",
    "firstname": "julee",
    "lastname": "fransic"
  }
];

And in app.js call it like this:

import  {datas} from './data';

answered Apr 4, 2019 at 7:21

Vladimir Bogomolov

1,79414 silver badges20 bronze badges

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

2 Comments

Deborah Over a year ago

Having imported datas, how would you call just "firstname"s?

Vladimir Bogomolov Over a year ago

@Deborah you want to get an array of first names? then const firstNames = datas.map( e => e.firstname)

Gilles Heinesch · Accepted Answer · 2019-04-04 07:44:34Z

2

You can use JSON file like this:

datas.json

[
    {
    "id":"1",
    "firstname":"sam",
    "lastname":"parkar"
    },
    {
    "id":"2",
    "firstname":"julee",
    "lastname":"fransic"
    }
]

In app.js:

import datas from './datas.json';

edited Apr 4, 2019 at 7:44

Gilles Heinesch

2,9801 gold badge26 silver badges45 bronze badges

answered Apr 4, 2019 at 7:37

Sumit Sahane

212 bronze badges

Comments

user11017939 · Accepted Answer · 2019-04-04 08:09:30Z

1

If you are using JSON file then save that file as datas.json

Now in your app.js file use <datas/> instead of {datas}.

you can use {datas} when you are using it in a jsx attribute. for example-

<textarea name="JSON" value={datas} />.

but in your case, you should use <datas />.

answered Apr 4, 2019 at 8:09

user11017939

1 Comment

kuber Over a year ago

I have tried your solution and cheers it works thanks a lot! +1

Collectives™ on Stack Overflow

How to access Object array file into react component?

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related