How to loop through nested objects in reactjs?

Question

Since this in an object i doing this but it doesn't work. How would I get the 'key' field through a loop?

  <div>
      <ul>
        {tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) =>
        (
          <li key={i}>
            Issue number: {tickets.issues.key}
          </li>
         ))}
      </ul>
  </div>

SOLUTION

   <div>
      <ul>
       {this.state.tickets && this.state.tickets.issues && Object.keys(this.state.tickets.issues).map((issue, i) =>
       (
        <li key={i}>
           Issue number: {this.state.tickets.issues[i].key}
        </li>
      ))}
      </ul>
  </div>

Answer 1

Looking at your response image the key field exists in issues[] but not in fields, so it should be fine just (no nesting required):

{ Object.keys(tickets.issues).map((issue, i) => (
  <li key={issue.key}>
   Issue number: {issue.key}
  </li>
))}

If you have the key in fields (not expanded in the image)

{ Object.keys(tickets.issues).map((issue, i) => (
  Object.keys(issue.fields).map(field=>(
 <li key={field.key}>
   Issue number: { field.key }
 </li>
)
))}

Answer 2

tickets.issues is an Array of Objects, so:

const { issues } = tickets;
issues.map(issue => console.log(issue.key));

Answer 3

A simple solution

  <div>
    <ul>
      {tickets && tickets.issues && Object.keys(tickets.issues).map((issue, i) => 
     (
      <li key={i}>
         Issue number: {tickets.issues.key}
      </li>
    ))}
    </ul>
  </div>