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

Question

*****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

Just trying to display this data but unable to.

Answer 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>

how can i display the other data in it, like to get the alerts array in it in typed

From the post I see site.alerts is an array. You need to have the same approach using map to print it.

Example

<ul key={'qw'}>
  {this.state.arraydata.map((data, index) => {
    return <li key={`ui-${index}`}>
      {data._id}
      <ul key={`alert-ui-${index}`}>
         {data.site.alerts.map((alertData, alertIndex)=>{
           return <li key={`alert-li-${alertIndex}`}>{alertData.alert}</li> 
         });
      </ul>
    </li>
  })}
</ul>