React: Iterating over array only returns first result

Question

It has taken me ages to get this to return a result at all, but now I can only get this function to return the first result in my array.

Example JSON: (Output of JSON.stringify(mapResult) from the next function)

[
  [
    {
      "_attributes": {
        "key": "aed8d486-9557-4e53-ae9c-78bfc938c719",
        "number": "1",
        "type": "Video",
        "title": "Stars.mov",
        "shortTitle": "Stars.mov",
        "state": "Completed",
        "position": "119980",
        "duration": "119980",
        "loop": "False",
        "muted": "True",
        "volume": "100",
        "balance": "0",
        "solo": "False",
        "audiobusses": "M",
        "meterF1": "0",
        "meterF2": "0"
      },
      "_text": "Stars.mov"
    },
    {
      "_attributes": {
        "key": "b9be415e-1c63-47fb-9791-72432eccd0c3",
        "number": "2",
        "type": "Colour",
        "title": "Colour",
        "shortTitle": "Colour",
        "state": "Paused",
        "position": "0",
        "duration": "0",
        "loop": "False"
      },
      "_text": "Colour"
    },
    {
      "_attributes": {
        "key": "23d74bb3-dbd8-410d-8b16-d05a9db4b656",
        "number": "3",
        "type": "Capture",
        "title": "Sample Input",
        "shortTitle": "Sample Input",
        "state": "Running",
        "position": "0",
        "duration": "0",
        "loop": "False",
        "muted": "True",
        "volume": "100",
        "balance": "0",
        "solo": "False",
        "audiobusses": "M",
        "meterF1": "0",
        "meterF2": "0"
      },
      "_text": "Sample Input"
    }
  ]
]

Function within the Component:

switcherPGM = () => {

    console.log(JSON.stringify(mapResult));
    
    const inputMap = mapResult.map((input, i) => {
      return (
        <div key={i}>
          <h3>{input[i]._attributes.title}</h3>
          <span>
            <Button color="danger" size="lg" block>
              {input[i]._attributes.number}<br />
              {input[i]._attributes.title}<br />
            State: {input[i]._attributes.state}<br />
            Loop: {input[i]._attributes.loop}<br />
            Type:  {input[i]._attributes.type}<br />
            </Button>
          </span>
        </div>
      )
    })
    return inputMap;
  }

This only returns the first item, Stars. No other buttons are created.

Any help is appreciated.

Mohammad Faisal · Accepted Answer · 2020-10-18 16:28:01Z

2

You have an array inside another array . thats why your map function only returning one element. rewrite your code like this ....

const modifiedMap = mapResulst[0];
let inputMap = []
if(modifiedMap){
  inputMap = modifiedMap.map((input, i) => {
      return (
        <div key={i}>
          <h3>{input._attributes.title}</h3>
          <span>
            <Button color="danger" size="lg" block>
              {input._attributes.number}<br />
              {input._attributes.title}<br />
            State: {input._attributes.state}<br />
            Loop: {input._attributes.loop}<br />
            Type:  {input._attributes.type}<br />
            </Button>
          </span>
        </div>
      )
    })
}
return inputMap

edited Oct 18, 2020 at 16:28

answered Oct 18, 2020 at 16:18

Mohammad Faisal

2,3771 gold badge13 silver badges18 bronze badges

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

5 Comments

Newsworthy Over a year ago

Thanks Mohammed, but I get "TypeError: Cannot read property 'map' of undefined", which is weird, because when I console.log(mapResult[0]); it shows the arrays...

Mohammad Faisal Over a year ago

does your json response need some time to load ? or does it come right away ?

Newsworthy Over a year ago

It is coming from an API, which is updated periodically asynchronously by Axios

Newsworthy Over a year ago

You did it Mohammad, thank you very very much. :) It is working as I'd hoped!

Mohammad Faisal Over a year ago

happy yo help :D

Collectives™ on Stack Overflow

React: Iterating over array only returns first result

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related