reactjs - how to display the content of the state component in react

Question

i wrote an api to send the information in json form and i was able to store the data in state variable and if i try to display the content in JSX it just dose not work here is my code

import React , {Component, Fragment} from "react";
import Api from "../api"

const api = Api();

class Main extends Component {
   state = {
   data : []
}

componentDidMount(){
   api.get("/api/getallitems").then(
       response => {
           console.log(response.data)
           this.setState({
               data: response.data
           })
       }
    )
 }

render(){
    const {data} = this.state;
    return(
        <div>
        {
            data.length ?
            data.map(
            info => {
            <div>
                <h2 key={info.id}>{info.id, info.name, info.stock}</h2><br/>
                <script scr={console.log(info)}/>
            </div>
            }):null
         }
         this is data from api
         </div>
    );
  }
}

export default Main;

this is the output of my code

question from:https://stackoverflow.com/questions/65923572/how-to-display-the-content-of-the-state-component-in-react

Answer 1

This is how you need to do it:

render(){
    const {data} = this.state;
    return(
        <div>
        {
            data.length ?
            data.map(
            info => {
    return(
            <div>
                <h2 key={info.id}>{info.id, info.name, info.stock}</h2><br/>
                <script scr={console.log(info)}/>
            </div>)
            }):null
         }
         this is data from api
         </div>
    );
  }