ReactJS - TypeError: Cannot read property 'name' of undefined

Question

I'm fetching data from an API and I want to show on the screen some objects (for example 'name' object) and I'm getting the following error:

"TypeError: Cannot read property 'name' of undefined"

I already tried to show data after the api request (with booleans)

Does anyone know what might be the problem?

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      products: {},
    }
    this.fetchDevices = this.fetchDevices.bind(this);
}

async fetchDevices() {
  const url = 'my url';
  const response = await fetch(url, {method : 'GET', headers : headers});
  const data = await response.json()
  this.setState({products : data.value})
}

componentDidMount() {
  this.fetchDevices();
}

render() {
  return (
    <div>
      {this.state.products ? <p>{this.state.products[0].name}</p> : null}     
    </div>
  )}
}

export default App

{
"value": [
    {
        "urn": null,
        "name": "New_COMEC",
        "description": null,
        "icon": "icon-energy-meter",
        "customIdFormat": null,
        "customIdDisplay": true,
        "customIdRequired": true,
        "serialNumberFormat": null,
        "serialNumberDisplay": true,
        "serialNumberRequired": false,
        ....,
    }
]

this.state.products[0] does not have property name.

holydragon
– holydragon

2019-04-30 09:05:53 +00:00
Commented Apr 30, 2019 at 9:05 — holydragon
– holydragon, Commented Apr 30, 2019 at 9:05

JiN · Accepted Answer · 2019-04-30 09:16:45Z

2

You have initialized your products state as an empty object instead of an array. The render method will be called before your fetch call, hence the app breaks. Since you initialized as an object,

{this.state.products ? <p>{this.state.products[0].name}</p> : null}

is true in the initial render, so it tries to get the first array element when the state is actually an object at that time..

Your code ought to be like

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      products: [],
    };

and

{Array.isArray(this.state.products) && this.state.products[0] ? <p>{this.state.products[0].name}</p> : null}

answered Apr 30, 2019 at 9:16

JiN

8281 gold badge8 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

ReactJS - TypeError: Cannot read property 'name' of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related