How do I display the list of values from restapi on reactstrap list item

Question

Following is my code:

import React, { Component, Fragment,useState } from "react";
import RestAPI from "services/api";



import { handleServerErrors } from "utils/errorHandler";
   
const options = {
  colors: ["#aab5f0", "#99ccee", "#a0ddff", "#00ccff", "#00ccff", "#90c5f0"],
  enableTooltip: true,
  deterministic: true,
  fontFamily: "arial",
  fontSizes: [15, 60],
  fontStyle: "normal",
  fontWeight: "normal",
  padding: 3,
  rotations: 1,
  rotationAngles: [0, 90],
  scale: "sqrt",
  spiral: "archimedean",
  transitionDuration: 1000
  };

class TestForm extends Component {
  constructor(props){
    super(props);
    this.state={
      items:[],
      isLoaded:false,
      key:"",
      value:""
    }
  }
  handleChange = (event) =>
    this.setState({value: event.target.value});
  componentDidMount(){
    this.setState({ isLoding: true }, () => {
      RestAPI.newForm()
        .then((response) => {
          let keywordArray = [];
          for (let i = 0; i <= response.data.length; i++) {
            keywordArray.push({
              text: response.data[i].key,
              
              
            });
          }
          if (response.data.length === 0) {
            this.setState({
              isData: false,
            });
          }
          this.setState({
            isLoding: false,
            items: keywordArray,
          });
        })
        .catch((error) => {
          this.setState({ isLoding: false });
          handleServerErrors(error, toast.error);
        });
    });
  }
     
 
      render() {

        var {isLoaded,items} = this.state;

        
        
        return (
          <>
           
                         
                            
                           
                               
                            <div>
      {items.map(item => {
              return <li>{item[0]}</li>;
            })}
      </div>
    

          
                         
                        
    
   
                         
                  
               
          </>
        );
      }
}

export default TestForm;

From the Rest API, I am getting the following list as data:

["ant","build","code",...]

I want this list to be displayed under list item whenever I choose an option from dropdown. The values are not displayed and I also tried writing the code in changeEvenet instead of ComponentdidMount(). Even then it doesn't work. What could be a working solution?

Answer 1

You are complicating the code, this is a simple example of how u can extract the data

class TestForm extends Component {
  constructor(props){
    super(props);
    this.state={
      items:[],
      isLoaded:false,
    }
  }

  componentDidMount(){
      this.setState({isLoading: true})
        RestAPI.newForm()
        .then((response) => {
            if(response && 'data' in response) {
                this.setState({
                    items: response.data,
                    isLoading: false
                })
            }else {
                this.setState({
                    isLoading: false,
                })
            }
        })
    });
  }
     
 
      render() {

        var {isLoaded,items} = this.state;
        return (
            <div>
                {items.map(item => <li>{item}</li>}
            </div>
        );
      }
}

export default TestForm;