score:0

Accepted answer

you can combine all the arrays and do the map in one step like this

const cardlist = ({ results0, results1, results2, results3, results4 }) => {
    return (
        <fragment>
            {[...results0, ...results1, ...results2, ...results3, ...results4].map((result, i) =>
                (<card
                    key={i}
                    name={result.name}
                    skin_color={result.skin_color}
                    eye_color={result.eye_color}
                    birth_year={result.birth_year}
                    gender={rresult.gender}
                />))
            }
        </fragment>
    );
};
export default cardlist;

score:0

first, if the callbacks are identical, factor them out into a utility function, remember to use the current value of the array::map callback

const renderperson = (person, i) => (
  <card
    key={i}
    name={person.name}
    skin_color={person.skin_color}
    eye_color={person.eye_color}
    birth_year={person.birth_year}
    gender={person.gender}
  />
);

this can be further reduced using object destructuring

const renderperson = ({ birth_year, eye_color, gender, name, skin_color }, i) => (
  <card
    key={i}
    name={name}
    skin_color={skin_color}
    eye_color={eye_color}
    birth_year={birth_year}
    gender={gender}
  />
);

now you've reduced your code to a more manageable

results0.map(renderperson)
results1.map(renderperson)
results2.map(renderperson)
results3.map(renderperson)
results4.map(renderperson)

but you've still some repetition, you can dump the 5 result props into an array and also map them

[results0, results1, results2, results3, results4].map((result, i) => (
  <fragment key={i}>
    {result.map(renderperson)}
  </fragment>
))

Related Query

More Query from same tag