You May Have Returned Undefined, An Array Or Some Other Invalid Object Rendering State Data

Have been facing issue while iterating through a list and printing elements in React. The React Code is: import React from 'react'; import ReactDOM from 'react-dom'; class NewComp

Solution 1:

what you can do is extract your js code from the render method in a separate method like so:

renderList() {
   returnthis.state.myData.map((item) => {
      <div><h3>{item.title}</h3><p>{item.description}</p></div>
   })
}

then in your render method:

render() {
  if(this.state.myData.length){
    return (
       <div>{this.renderList()}</div>
    );
  }
  else
  {
    return (
      <div>Loading...</div>
    );
  }
}

Solution 2:

You can wrap it with root element like div, React ver 15 render functions supports only returning one element.

render() {
    <div>{this.state.myData.map((item) =>
        <div><h3>{item.title}</h3><p>{item.description}</p></div>
          )}</div>
   }
 }

Solution 3:

Change like this, While you using map should use key attribute for index

makeUI() {
        if(!this.state.myData.length)
            returnreturnthis.state.myData.map((item, index) => {
        return (
            <divkey={index}><h3>{item.title}</h3><p>{item.description}</p></div>
            )
         })
    }

    render() {
        return (<div>
            { this.makeUI() }
            </div>
        )
    }

Solution 4:

I think you are missing the return in renderList -> .map

This should work.

renderList() {
    returnthis.state.myData.map((item) => {
        return (      
            <div><h3>{item.title}</h3><p>{item.description}</p></div>
        );
    });
}

render() {
    if(this.state.myData.length){
        return (
            <div>{this.renderList()}</div>
        );
    }
    else {
        return (
            <div>Loading...</div>
        );
    }
}