How to render object that pass through props in ReactJS?

Question

I am trying to render the data (object) that comes through props. However, I have got the following error:
Uncaught TypeError: Cannot convert undefined or null to object Some how, I do not know why the data or object is null although the state of the data is updated during componentDidMount(). Would you help me why the data is null?

Please look class A to see how the data is consumed

class A extends React.Component {
  state = {
    data: null
  };

  componentDidMount() {
    this.data = this.props.location.state.data;
    this.setState({ data: this.props.location.state.data });
  }

  render() {
    return (
      <div>
        {Object.keys(this.data).map((key, index) => (
          <p key={index}> value is {this.data[key]}</p>
        ))}
        hello
      </div>
    );
  }
}

A.propTypes = {
  data: PropTypes.object,
  location: PropTypes.object
};
export default A;

Assume, this.data contains the data in the following format

{
    id: 1,
    userName: "ABDXY",
    date: "01/12/2020",
    time: "21:00"
}

`this.data` is null or undefined, and you get the error when you call `Object.keys` on it. This has nothing to do with React or JSX. — Jared Smith, Nov 15 '19 at 11:34
Why are you using `this.data` instead of using `this.state.data`? — junwen-k, Nov 15 '19 at 11:34
add this.data as a property in state and then use it from this.state, or use this.props.location.state.data directly in Object.keys() — Ernesto, Nov 15 '19 at 11:35
may be [this](https://stackoverflow.com/questions/3515523/javascript-how-to-generate-formatted-easy-to-read-json-straight-from-an-object) is what you want — , Nov 15 '19 at 11:37
@Ernesto instead of using `this.props.location.state.data` . How can I assign or change the state of `data` to `this.props.location.state.data`. So that I can use `data` in the iteration — Daniel, Nov 15 '19 at 11:43

Monica Acha · Accepted Answer · 2019-11-15T11:58:49.383

1

this.data is not defined. You can access the data that is set in the state using this.state.data

Please ensure that this.props.location.state.data is not null

class A extends React.Component {
  state = {
    data: {}
  };

  componentDidMount() {
    // this.data = this.props.location.state.data;  => not required.
    this.setState({
      data: this.props.location.state.data
    });
  }

  render() {
    return ( <
      div > {
        Object.keys(this.state.data).map((key, index) => ( < 
          p key = {
            index
          } > value is {
            this.state.data[key]
          } < /p>
        ))
      }
      hello <
      /div>
    );
  }
}

edited Nov 15 '19 at 11:58

answered Nov 15 '19 at 11:47

Monica Acha

1,076
9
16

It doesnt work as it is but if you change `null` to `{}` it works. Please update your answer – Daniel Nov 15 '19 at 11:56
Cool. Will improve my answer. But that shouldn't be a problem i think. – Monica Acha Nov 15 '19 at 11:58

score 0 · Answer 2 · answered Nov 15 '19 at 11:49

Get data from state instead of this.data since it will not trigger render when this.data will update. Also use {} as default value

class A extends React.Component {
  state = {
    data: {}
  };

  componentDidMount() {
    const data = {
      id: 1,
      userName: "ABDXY",
      date: "01/12/2020",
      time: "21:00"
    };
    this.setState({ data });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {Object.keys(data).map((key, index) => (
          <p key={index}> value is {data[key]}</p>
        ))}
        hello
      </div>
    );
  }
}

export default A;

How to render object that pass through props in ReactJS?

2 Answers2