title: Getting error while trying to render array of object in react js
body: <p>Uncaught Error: Objects are not valid as a React child (found: object with keys {titlesCollection}). If you meant to render a collection of children, use an array instead</p>
  
  <p>I am getting this error while trying to render array of object, what I am doing wrong here?</p>
  
  <pre><code>import * as React from 'react';
  import * as FontAwesomeIcon from 'react-fontawesome';
  const data = {
    otherTitles:[
          {
              titleHeading:"X",
              titles:["A","B","C","D"]
          },
          {
              titleHeading:"Y Z",
              titles:["E","F","G","H"]
          }        
      ]
  }
  
  export class OtherTitlesCollection extends React.Component{
  
    render() {
      const titlesCollection = data.otherTitles.map((othertitle)=&gt;{
          let dataId = othertitle.titleHeading.replace(' ','');
          return(
              &lt;div key={dataId}&gt;
                  &lt;div&gt;
                      &lt;FontAwesomeIcon name='plus-circle' data-toggle="collapse"
                      data-target={"#"+dataId} role="button" aria-expanded="false" aria-controls={dataId}/&gt;
                      &lt;label&gt;{othertitle.titleHeading}&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div  className="collapse" id ={dataId}&gt;
                      {
                          othertitle.titles.map((title)=&gt;{
                              return(&lt;div key={title} style={{margin: "1px auto 1px 10px"}}&gt;{title}&lt;/div&gt;);
                          })
                      }
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      });
      return (
          {titlesCollection}
      );
    }
  };
  </code></pre>