-1

I have the following Object (after some dot operating inside) I called it props.stuff , Given: data is passed from Parent component to child as 

//Parent
componentDidMount() {
    this.getData();
  }

  async getData() {
    const res = await axios.get(
      "{link here}"
    );
    const { data } = await res;
    this.setState({ stuff: data});
  }

<Child props={this.state.stuff} />

so, in Child when I do console.log(props.stuff):

props.stuff= {
"date":"November 14",
"status":"PENDING",
"id":"146859",
"invoice_number":"123685479624",
"amount":"950.00",
"currency":"$"
}

But trying to access props.stuff.date ( or anything like props.stuff.{element} ) gives me undefined. What am I doing wrong?

NOTE: I got the string below by doing console.log(JSON.stringify(props.stuff)) so this is exactly what it is.

bhav_yea
  • 63
  • 6
  • 1
    Please add a [mcve]. Also note that [there is no such thing as a JSON object](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation): either it is a JSON string or an object. – str Apr 10 '20 at 07:23

1 Answers1

-2

So I figured out the solution finally. Actually props was being passed to a child component from a parent component and in the parent component, it was being fetched through an API call. So initial value of props was undefined.

In the parent component, writing:

{props.stuff && <Child stuff={props.stuff} />}

This made sure that props is passed only if it exists, hence fixing the issue

bhav_yea
  • 63
  • 6