Iterate through Object of arrays in react js

Question

I am trying to render the following json response.

 "tickets": {
        "tickets": [
            "A Nuisance in Kiribati",
            "A Nuisance in Saint Lucia"
        ]
  }

My attempt is as below.

const display4 = Object.keys(this.state.ticketsList).map(
  (keyName, keyIndex) => {
    return (
      <div className="my-posts">
        <li key={keyIndex}>{keyName}_{keyIndex}:</li>
        <li key={keyIndex}>{this.state.ticketsList[keyName]}</li>
      </div>
    );
  }
);

But it will display the tickets array in a single line without any separation even. I tried all most all the things on the internet. But nothing works yet. How can I fix this?

where is the ticketsList in the state ?

Sarun UK
– Sarun UK

2020-10-18 14:40:12 +00:00
Commented Oct 18, 2020 at 14:40 — Sarun UK
– Sarun UK, Commented Oct 18, 2020 at 14:40

Dylan Kerler · Accepted Answer · 2020-10-18 14:35:52Z

1

You are reading the raw array and displaying it - that's why it displays all in one line. this.state.ticketsList[keyName] is the array. So you need to iterate through it in an additional loop to display each item.

Try this:

const display4 = Object.values(this.state.ticketsList).map(
  tickets => tickets.map((ticketName, index) =>
      <div className="my-posts">
        <li key={index}>{ticketName}_{index}:</li>
        <li key={index}>{ticketName}</li>
      </div>
  )
);

answered Oct 18, 2020 at 14:35

Dylan Kerler

2,2072 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Iterate through Object of arrays in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related