Accessing nested JSON data with React Hooks & Props

Question

I'm trying to access data further down into my JSON file. I am able to easily access data in the first two data sets in rows and area:

data.json

"rows": [
    {
      "uid":"001",
      "type": "Lorem ipsum",

      "area": [
        {

          "name": "London",
          "number": "12345",

          "wait": {
            "start": {
              "start_time": 1585129140,
              "delay": 300
            },
            "end": {
              "end_time": 1585130100,
              "delay": 300
            }
          },
          "in": 1585129140,
          "out": 1585130100,
        },

However when I try to access the data under wait which includes this block:

          "wait": {
            "start": {
              "start_time": 1585129140,
              "delay": 300
            },
            "end": {
              "end_time": 1585130100,
              "delay": 300
            }
          },

No data is getting returned on screen from my jsx file, but it is available in the console log

TimeTracker.jsx

const TimeTracker = (props) => {

  const trainTime = useState(props.data);
  console.log(props.data);
  
  
  return (
    <>
      <div className={style.timeLabel}>
      <div className={style.startTime}>{trainTime.start_time}</div>
      <div className={style.endTime}></div>
      </div>
    </>
    )
  };
  export default TimeTracker;

console.log

wait:
start:
start_time: 1585129140
delay: 300
__proto__: Object
end:
end_time: 1585130100
delay: 300
__proto__: Object
__proto__: Object

I've used the same pattern for passing props in other components and it works fine on the first two levels so I don't understand why it's not working. How do I get data from further in this JSON?

const trainTime = useState(props.dat); why do you use state here? — Kid
– Kid, Commented Apr 14, 2020 at 12:08

Eyal Ben-Ivri · Accepted Answer · 2020-04-14 12:09:33Z

1

useState returns a tuple with the object and a function to set the value on the object. You probably need to change your component to something like this:

const TimeTracker = (props) => {

  const [trainTime, setTrainTime] = useState(props.data);
  console.log(props.data);


  return (
    <>
      <div className={style.timeLabel}>
      <div className={style.startTime}>{trainTime.start_time}</div>
      <div className={style.endTime}></div>
      </div>
    </>
    )
  };
  export default TimeTracker;

answered Apr 14, 2020 at 12:09

Eyal Ben-Ivri

315 bronze badges

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

Comments

Zohaib Ijaz · Accepted Answer · 2020-04-14 12:08:20Z

0

A nested property can not be accessed by one level of a.b so instead of

<div className={style.startTime}>{trainTime.start_time}</div>

it should be

<div className={style.startTime}>{trainTime.wait.start.start_time}</div>

answered Apr 14, 2020 at 12:08

Zohaib Ijaz

23k7 gold badges42 silver badges63 bronze badges

Collectives™ on Stack Overflow

Accessing nested JSON data with React Hooks & Props

data.json

TimeTracker.jsx

console.log

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

data.json

TimeTracker.jsx

console.log

2 Answers 2

Comments

Comments

Related