mapping through all non-empty objects in react

Question

I'm using Framer X (which uses react) to generate a bunch of components. I have an array of objects like so:

const chosenBets = [{}, { id: 1
 label: "X"
 odd: 2.63
 oddIndex: 1
 team_home: "Bournemouth"
 team_away: "West Ham United"
 matchCardIndex: 1}]

I'm then mapping through the array:

        {props.chosenBets.map((match, i) => {
            return (
                <div key={i}>
                    {i}
                </div>
            )
        })}

The result will be generating two divs, seems the length of the array is 2. How do I make it so that only non-empty objects are rendered?

you could do `chosenBets.filter(whatever).map....` – georg Sep 28 '19 at 10:18 — georg, Sep 28 '19 at 10:18

score 2 · Accepted Answer · answered Sep 28 '19 at 10:21

2

Just check if objects are non-empty in map. Alternatively, use .filter().

{props.chosenBets.map((match, i) => {
  if (Object.keys(match).length !== 0
    return (
      <div key={i}>
        {i}
      </div>
    );
})}

answered Sep 28 '19 at 10:21

Dragos Strugar

1,314
3
12
30

score 2 · Answer 2 · answered Sep 28 '19 at 10:29

2

simply use filter first and then map

{props.chosenBets.filter(v=> Object.keys(v).length).map((match, i) => {
       return (
       <div key={i}>
           {i}
       </div>
     )
 })}

answered Sep 28 '19 at 10:29

Code Maniac

37,143
5
39
60

mapping through all non-empty objects in react

2 Answers2