title: ReactJS - How to create tabs dynamically?
body: <p>I am bit stuck with ReactJS and react-tabs. I want to dynamically create tabs and their contents in React. I have this function:</p>
  
  <pre><code>class MyLog extends React.Component{
      constructor(props){
          // Pass props to parent class
          super(props);
          // Set initial state
          this.state = {
              data: [],
              shops: [],
          }
          this.apiListUrl = '/backend/MyLog/listApi';
          this.apiStoreUrl = '/backend/MyLog/storeApi';
       }
  
      componentDidMount(){
          // Make HTTP request with Axios
          axios.get(this.apiListUrl)
              .then((res) =&gt; {
                  // Set state with result
                  this.setState({data:res.data.data});
              });
  
          axios.get(this.apiStoreUrl)
              .then((res) =&gt; {
                  // Set state with result
                  this.setState({shops:res.data.data});
              });
      }
  
      render(){
          // Render JSX
          return (
              &lt;div&gt;
                  &lt;Title /&gt;
                  &lt;ReactTabs.Tabs&gt;
                      &lt;ReactTabs.TabList&gt;
                          &lt;ReactTabs.Tab&gt;Title 1&lt;/ReactTabs.Tab&gt;
                      &lt;/ReactTabs.TabList&gt;
                      &lt;ReactTabs.TabPanel&gt;Contents 1&lt;/ReactTabs.TabPanel&gt;
                  &lt;/ReactTabs.Tabs&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>In this.data.shops is the data with the following structure</p>
  
  <pre><code>0: "testStore"
  1: "testStore2"
  </code></pre>
  
  <p>I want to achieve that the results are:</p>
  
  <pre><code>&lt;ReactTabs.TabList&gt;
         &lt;ReactTabs.Tab&gt;testStore&lt;/ReactTabs.Tab&gt;
         &lt;ReactTabs.Tab&gt;testStore2&lt;/ReactTabs.Tab&gt;
  &lt;/ReactTabs.TabList&gt;
  </code></pre>
  
  <p>But how can I create these two tabs dynamically on basis of the data in <code>this.state.shops</code>?</p>