title: ReactJS: How to render a JSON object with an array
body: <p>I'm trying to render an object with an array into an array (a JSON), that I receive from an API. I've tried a lot but I don't get with the solution. </p>
  
  <p>This is the object format I receive:</p>
  
  <pre><code>{
      "catalogue": [
          [
              "shoes.txt",
              "trousers.txt",
              "tshirts.txt"
          ]
      ]
  }
  </code></pre>
  
  <p>This is the code I'm using to call the API and render the object:</p>
  
  <pre><code>import React, { Component } from "react";
  import axios from "axios";
  
  class Result extends Component {
    constructor(props) {
      super(props);
      this.state = {
        items: [],
      };
    }
  
    componentDidMount() {
      const URL = "http://localhost/catalogue";
      fetch(URL)
        .then((response) =&gt; response.json())
        .then((data) =&gt; this.setState({ items: data }));
    }
  
    render() {
      const catalogue = this.state.items.catalogue;
      return &lt;div&gt;{catalogue}&lt;/div&gt;;
    }
  }
  
  export default Result;
  
  </code></pre>
  
  <p>The only I could show in the web is this:</p>
  
  <pre><code>shoes.txttrousers.txttshirts.txt
  </code></pre>
  
  <p>The view I can get is something like this:</p>
  
  <pre><code>shoes.txt
  trousers.txt
  tshirts.txt
  </code></pre>
  
  <p>Would somebody help me please? Thanks in advance.</p>