Mapping JSON data with React Hooks

Question

I'm working on a small project and I am trying to map data from a JSON file into my project. In components with nested data, I keep getting an let data = props.data["runways"];.

data.json:

{
   "runways":[
      {
         "slot":"Area 1",
         "planes":[
            {
               "name":"PanAm",
               "number":"12345",
               "start":{
                  "time":1585129140
               },
               "end":{
                  "time":1585130100
               }
            },
            {
               "name":"PanAm 222 ",
               "number":"12345",
               "start":{
                  "time":1585129140
               },
               "end":{
                  "time":1585130100
               }
            }
         ]
      }
   ]
}

App.js,

I pass the JSON data as props:

import planeData from './plane_info.json'


const Container = () => {

    const [planeDataState, setPlaneDataState] = useState({})
    const planeData = () => setPlaneDataState(planeData[0].runways)
    return (
           <>
            <MyPlane planeInfo={planeDataState}/>
            <button onClick={planeData} type="button">Get Data</button>
           </>
       )
}

and finally, I want to bring my data into my component:

MyPlane.jsx

const MyPlane = (props) => {
    let data = props.data["runways"];
    if(data)
        console.log(data, 'aaa')
        return (
            <>
                {
                    data ? (
                        <div>
                        <span>{props.planeInfo.name}</span>
                        <span>RAIL TYPE: {props.planeInfo.type}</span>
                        </div>
                    ) : <h6>Empty</h6>
                }
            </>
        );
}

According to the error message, the problem occurs at this line of code: let data = props.data["runways"]; However, I believe that I am passing the data for runways from the JSON file. I've never worked with React Hooks to pass data, so I'm confused about why this error is occurring.

Juan Marco · Accepted Answer · 2020-04-02 14:58:21Z

In order to map effectively over the JSON data it's necessary to understand how that data structure is composed.

If you're unsure, using JSON.stringify() is a great way to get the "bigger picture" and then decide what exactly is it that you want to display or pass down as props to other components.

It appears you wish to get the plane data (which is currently an array of 2 planes). If so, you could first get that array, set the state, then map over it to display relevant info. Perhaps like this:

const data = {
  "runways":[
     {
        "slot":"Area 1",
        "planes":[
           {
              "name":"PanAm",
              "number":"12345",
              "start":{
                 "time":1585129140
              },
              "end":{
                 "time":1585130100
              }
           },
           {
              "name":"PanAm 222 ",
              "number":"12345",
              "start":{
                 "time":1585129140
              },
              "end":{
                 "time":1585130100
              }
           }
        ]
     }
  ]
}

function App() {

  const [ planeData, setPlaneData ] = React.useState(null)

  React.useEffect(() => {
    setPlaneData(data.runways[0].planes)
  }, [])

  return (
    <div className="App">
      {/* {JSON.stringify(planeData)} */}
      {planeData && planeData.map(p => (
        <p key={p.name}>
          {p.name} | {p.number} | {p.start.time} | {p.end.time}
        </p>
      ))}
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Thanks @Juan Marco, this was a really clear explanation and I learned something new also.

Puja Srivastava · Accepted Answer · 2020-04-02 14:37:15Z

1

Here const planeData = () => setPlaneDataState(planeData[0].runways)

In this line, planeData[0].runways will be undefined according to the json file which you have shared.

Instead try setting and passing entire json object, ie,

const planeData = () => setPlaneDataState(planeData)

Try this, And then inside MyPlane.jsx component, let data = props.data["runways"]; this won't be undefined. So , the error won't come.

answered Apr 2, 2020 at 14:37

Puja Srivastava

3361 silver badge8 bronze badges

Comments

halfer · Accepted Answer · 2020-04-15 16:09:54Z

At the beginning there is no data in props.data['runways'] (also you can use props.data.runways, I guess you come from another language like Python as of this syntax that you are using), because you sent the request at first, it takes time for request to be satisfied, so you need to check in your <MyPlane /> component to see if there is a runways key in data and then proceed to render the component, something like below:

const MyPlane = (props) => {
    const data = props.data
    return (
      <>
        {
          data.runways
            ? <>
                ...your render able items that you wrote before
              </>
            : <p>There is no data yet!</p>
        }
      </>
    )
}

Also please note that you might return something from component. At your case your render is inside the if(data){...} statement! what if the condition was not satisfied? which is your current error case !

NOTE: please check that you are passing your planeDataState as planeInfo prop to the child component, so you might have something like:

const data = props.planInfo

to be able to use the data variable that you've defined before the render part.

Collectives™ on Stack Overflow

Mapping JSON data with React Hooks

data.json:

App.js,

MyPlane.jsx

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

data.json:

App.js,

MyPlane.jsx

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related