unable to display the data in react but able to see in the console

*****My code *****

export default class App extends Component {


  

  state = {
    arraydata: []   };


  componentDidMount = () => {
    this.getmongodbdata();   }

  getmongodbdata = () => {
    axios.get('http://localhost:8080/fetch').then(res => {
      console.log(res.data,)
      console.log('Data is recieved')
      this.setState({arraydata: res.data})
      
    })
      .catch(() => {
        alert('Sorry, could not able to fetch the data');
      })   }
  


     render() {
    return (
      <div className="Main">
       <header className="App-header">
          
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Future</h1>
       </header> 


       <h1> hello world</h1>

        <ul key={'qw'}>
          {this.state.arraydata.map((data) => {
            <li key={'ui'}>
              {data._id}
            </li>
            console.log(data._id)
          })}
        </ul>

        


      <div className={"blog-"}>
      
      
      
      </div>
      </div>
    )   } }

*My output in console and react to

enter image description here

Just trying to display this data but unable to.

1 thought on “unable to display the data in react but able to see in the console”

  1. map should return the array to be printed. Try this

    <ul key={'qw'}>
      {this.state.arraydata.map((data, index) => {
        return <li key={`ui-${index}`}>
          {data._id}
        </li>
      })}
    </ul>
    
    Reply

Leave a Comment