title: React: Better way of mapping this data
body: <p>So this is a continuation of previous questions. I just started using react and I've managed to fetch a xml file, convert it to json and then loop through the data. But I think there should be a better way to go through what I've done as I'm using a function I found on another SO answer and then used a map() within it. </p>
  
  <p>Anyways here's the breakdown of my code.</p>
  
  <p>Fetching the xml and converting to json:</p>
  
  <pre><code>componentDidMount() {
      axios.get('https://gist.githubusercontent.com/eMatsiyana/e315b60a2930bb79e869b37a6ddf8ef1/raw/10c057b39a4dccbe39d3151be78c686dcd1101aa/guestlist.xml')
      .then(res =&gt; {
        const xml = XMLMapping.load(res.data);
        var guests  = XMLMapping.tojson(xml);
        this.setState({guests: guests});
      });
    }
  </code></pre>
  
  <p>The results of the json in console:</p>
  
  <pre><code>Object{
    dataset{
     record{
      0{
        company{
          $t: "Skippad"
        }
        first_name{
          $t: "Keith"
        }
        last_name{
          $t: "Cook"
        }
      }
      1{
        company{
          $t: "Skippad"
        }
        first_name{
          $t: "Keith"
        }
        last_name{
          $t: "Cook"
        }
      }
     }
    }
  }
  </code></pre>
  
  <p>I'm using this function to map the object and then using a map() within it:</p>
  
  <pre><code>function mapObject(object, callback) {
    return Object.keys(object).map(function (key) {
      return callback(key, object[key]);
    });
  }
  </code></pre>
  
  <p>This is what the final mapping of the data looks like:</p>
  
  <pre><code>{mapObject(this.state.guests, (key, value) =&gt; {
    return &lt;div key={key}&gt;
      {value.record
      .filter(
        (item,index) =&gt; {
          return (
            item.first_name.$t.toLowerCase().includes(this.state.search.toLowerCase())
            //item.last_name.$t.toLowerCase().includes(this.state.search.toLowerCase())
            //item.company.$t.toLowerCase().includes(this.state.search.toLowerCase())
          )
        }
      )
      .map((item,index) =&gt; {
        return &lt;div className="columns is-mobile" key={index}&gt;
          &lt;div className="column" key={index}&gt;{item.first_name.$t} {item.last_name.$t} &lt;span class="is-hidden-tablet"&gt;&lt;br /&gt;{item.company.$t}&lt;/span&gt;&lt;/div&gt; 
          &lt;div className="column is-hidden-mobile" &gt;{item.company.$t}&lt;/div&gt;
          &lt;div className="column is-hidden-mobile"&gt;
            &lt;EmailFormdisplay guestid={index} /&gt;
          &lt;/div&gt;
          &lt;div className="column is-hidden-mobile"&gt;
            &lt;PhoneFormdisplay guestid={index} /&gt;
            &lt;/div&gt;
            &lt;div className="column is-hidden-tablet is-one-third-mobile"&gt;
            &lt;Dropdown&gt;
              &lt;DropdownTrigger&gt;&lt;/DropdownTrigger&gt;
                &lt;DropdownContent&gt;
                  &lt;div className="columns"&gt;
                    &lt;div className="column"&gt;
                      &lt;EmailFormdisplay guestid={index} /&gt;
                    &lt;/div&gt;
                    &lt;div className="column"&gt;
                      &lt;PhoneFormdisplay guestid={index} /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/DropdownContent&gt;
            &lt;/Dropdown&gt;
            &lt;/div&gt;
        &lt;/div&gt;;
      })}
      &lt;/div&gt;
    })}
  </code></pre>
  
  <p>Is there a better way of doing this without using mapObject() and a map() within it?</p>
  
  <p>Any kind of feedback or advice would be greatly appreciated!</p>