title: ReactJS: looping through object
body: <p>Im new to react and Im confused how to map my object to my react component</p>
  
  <p>my object looks like this</p>
  
  <pre><code>const LinkValue = [{
          'XYZ':['About Us','Core Values','Careers','contact Us']
      },{
          'Help':['Payments','Saved Cards','FAQ']
      }]
  </code></pre>
  
  <p>React component</p>
  
  <pre><code>const LinkLoop = map(LinkValue,(value,key)=&gt;{
          return(
                  &lt;div className="col-md-2 col-sm-3 col-xs-6" key={key}&gt;
                  &lt;div className="quicklinks-card"&gt;
                      &lt;h3&gt;{value[key]}&lt;/h3&gt;
                      &lt;ul className="list-unstyled"&gt;
  
                          &lt;li&gt;
                              &lt;a href="#"&gt;value[key]&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;value[key]&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="#"&gt;value[key]&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      })
  </code></pre>
  
  <p>Im not clear how to loop through my object, also my object values is not of same length</p>
  
  <p>Expected Output</p>
  
  <pre><code>&lt;div className="col-md-2 col-sm-3 col-xs-6"&gt;
      &lt;div className="quicklinks-card"&gt;
          &lt;h3&gt;XYZ&lt;/h3&gt;
              &lt;ul className="list-unstyled"&gt;
  
                    &lt;li&gt;
                         &lt;a href="#"&gt;About Us&lt;/a&gt;
                    &lt;/li&gt;
                    &lt;li&gt;
                          &lt;a href="#"&gt;Core Values&lt;/a&gt;
                    &lt;/li&gt;
                     &lt;li&gt;
                          &lt;a href="#"&gt; Careers &lt;/a&gt;
                     &lt;/li&gt;
                    &lt;li&gt;
                          &lt;a href="#"&gt;contact Us&lt;/a&gt;
                     &lt;/li&gt;
               &lt;/ul&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;div className="col-md-2 col-sm-3 col-xs-6"&gt;
      &lt;div className="quicklinks-card"&gt;
          &lt;h3&gt;XYZ&lt;/h3&gt;
              &lt;ul className="list-unstyled"&gt;
  
  
                    &lt;li&gt;
                          &lt;a href="#"&gt; Payments &lt;/a&gt;
                    &lt;/li&gt;
                     &lt;li&gt;
                          &lt;a href="#"&gt; Saved Cards &lt;/a&gt;
                     &lt;/li&gt;
                    &lt;li&gt;
                          &lt;a href="#"&gt; FAQ &lt;/a&gt;
                     &lt;/li&gt;
               &lt;/ul&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to have loop through my object and place it my component..</p>
  
  <p>Thanks in advance.</p>