title: How do I display the list of values from restapi on reactstrap list item
body: <p>Following is my code:</p>
  <pre><code>import React, { Component, Fragment,useState } from &quot;react&quot;;
  import RestAPI from &quot;services/api&quot;;
  
  
  
  import { handleServerErrors } from &quot;utils/errorHandler&quot;;
     
  const options = {
    colors: [&quot;#aab5f0&quot;, &quot;#99ccee&quot;, &quot;#a0ddff&quot;, &quot;#00ccff&quot;, &quot;#00ccff&quot;, &quot;#90c5f0&quot;],
    enableTooltip: true,
    deterministic: true,
    fontFamily: &quot;arial&quot;,
    fontSizes: [15, 60],
    fontStyle: &quot;normal&quot;,
    fontWeight: &quot;normal&quot;,
    padding: 3,
    rotations: 1,
    rotationAngles: [0, 90],
    scale: &quot;sqrt&quot;,
    spiral: &quot;archimedean&quot;,
    transitionDuration: 1000
    };
  
  class TestForm extends Component {
    constructor(props){
      super(props);
      this.state={
        items:[],
        isLoaded:false,
        key:&quot;&quot;,
        value:&quot;&quot;
      }
    }
    handleChange = (event) =&gt;
      this.setState({value: event.target.value});
    componentDidMount(){
      this.setState({ isLoding: true }, () =&gt; {
        RestAPI.newForm()
          .then((response) =&gt; {
            let keywordArray = [];
            for (let i = 0; i &lt;= 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) =&gt; {
            this.setState({ isLoding: false });
            handleServerErrors(error, toast.error);
          });
      });
    }
       
   
        render() {
  
          var {isLoaded,items} = this.state;
  
          
          
          return (
            &lt;&gt;
             
                           
                              
                             
                                 
                              &lt;div&gt;
        {items.map(item =&gt; {
                return &lt;li&gt;{item[0]}&lt;/li&gt;;
              })}
        &lt;/div&gt;
      
  
            
                           
                          
      
     
                           
                    
                 
            &lt;/&gt;
          );
        }
  }
  
  export default TestForm;
  </code></pre>
  <p>From the Rest API, I am getting the following list as data:</p>
  <pre><code>[&quot;ant&quot;,&quot;build&quot;,&quot;code&quot;,...]
  </code></pre>
  <p>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?</p>