Displaying data based on json object not working

Question

I am fetching a JSON from a file in one ReactJS component and trying to display it but I don't know why something is not working. what am I doing wrong?

App.js

import React from 'react';
import Home from './components/Home';
import GameIntro from './components/GameIntro';
import {BrowserRouter,Switch,Route} from 'react-router-dom';

function App() {
  return (
    <div className='container mt-5 py-5'>
        <div className="row">
          <div className="col-md-6 offset-md-3">
            <BrowserRouter>
              <Switch>
                 <Route exact path='/' component={Home} />
                 <Route exact path='/intro' component={GameIntro} />
              </Switch>
            </BrowserRouter>

          </div>
        </div>
    </div>
  )
}

export default App;

JSON file:

gamedata.js

export const gdatas = [
    {
        "data": [
            {
            "id": 0,
            "image": "https://images.unsplash.com/photo-1492725764893-90b379c2b6e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Mom"
            },
            {
            "id": 1,
            "image": "https://images.unsplash.com/photo-1482235225574-c37692835cf3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Dad"
            }
        ]
    },
    {
        "data": [
            {
            "id": 2,
            "image": "https://images.unsplash.com/photo-1551445523-324a0fdab051?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Apple"
            },
            {
            "id": 3,
            "image": "https://images.unsplash.com/photo-1553279768-865429fa0078?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Mango"
            },
            {
            "id": 4,
            "image": "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Blueberry"
            }
        ]
    },
    {
        "data": [
            {
            "id": 5,
            "image": "https://images.unsplash.com/photo-1459411621453-7b03977f4bfc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "broccoli"
            },
            {
            "id": 6,
            "image": "https://images.unsplash.com/photo-1531170887152-6b21ba4ce8ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "cucumber"
            },
            {
            "id": 7,
            "image": "https://images.unsplash.com/photo-1564874997803-e4d589d5fd41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "tomato"
            },
            {
            "id": 8,
            "image": "https://images.unsplash.com/photo-1506807803488-8eafc15316c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "beetroot"
            }
        ]
    },
    {

        "data": [
            {
            "id": 9,
            "image": "https://images.unsplash.com/photo-1518674660708-0e2c0473e68e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Pen"
            },
            {
            "id": 10,
            "image": "https://images.unsplash.com/photo-1516962215378-7fa2e137ae93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Pencil"
            },
            {
            "id": 11,
            "image": "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Book"
            },
            {
            "id": 12,
            "image": "https://images.unsplash.com/photo-1527239441953-caffd968d952?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Papers"
            },
            {
            "id": 13,
            "image": "https://images.unsplash.com/photo-1551818014-7c8ace9c1b5c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60",
            "word": "Pendrive"
            }
        ]
    }
]

the file in which i am trying to display JSON is this:

GameIntro.js

import React from 'react';
import {gdatas} from './gamedata';

const GameIntro = () => {
    const gameData = gdatas.map(gd => {
        gd.data.map(elm =>(
        <div className="card">
            <img src={elm.image} className="card-img-top" alt={elm.word} />
            <div className="card-body">
                <h5 className="card-title mt-3">{elm.word}</h5>
            </div>
        </div>
        ))
    })
    return (
        <div className='container'>
            <div className="row">
                <div className="col-md-6">
                    {gameData}
                </div>
            </div>
        </div>
    )
}
export default GameIntro;

This component GameIntro.js is unable to display JSON.

The function you're passing to gdatas.map() isn't returning anything. I found this error right away because eslint is catching it in codesandbox / VS code. — user5734311
– user5734311, Commented Nov 14, 2019 at 22:00

Samuel Goldenbaum · Accepted Answer · 2019-11-14 22:07:18Z

1

You are not returning any data from the map function.

Add the return and add a key and you good to go:

const GameIntro = () => {
  const gameData = gdatas.map(gd => {
      return gd.data.map(elm =>(
      <div key={elm.id} className="card">
          <img src={elm.image} className="card-img-top" alt={elm.word} />
          <div className="card-body">
              <h5 className="card-title mt-3">{elm.word}</h5>
          </div>
      </div>
      ))
  });
  return (
      <div className='container'>
          {gameData}
      </div>
  )
}

answered Nov 14, 2019 at 22:07

Samuel Goldenbaum

19k20 gold badges74 silver badges112 bronze badges

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

4 Comments

user5734311 Over a year ago

Isn't this basically a typo question? Are we really supposed to post answers to these? I don't know, feels wrong to me. I'm sure lots of people get stumped by the same simple mistake, but are they going to find this question? Highly doubtful imo.

Arjun Kumar Over a year ago

Thank u so much.It helped.

Samuel Goldenbaum Over a year ago

@ChrisG I have seen another question on SO today where a developer was using map to simply loop through data instead of using forEach and didn't realize map was used to return data. Maybe it was a typo, OP can answer. The code also needed a key property on the div.

Samuel Goldenbaum Over a year ago

I think you only upvoted it - tap the big tick next to the answer.

Collectives™ on Stack Overflow

Displaying data based on json object not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related