CharacterCards.jsx

import React from "react";

const CharacterCard = ({ children }) => (
    <div className="id-card-wrapper">
        <div className="id-card">
            { children }
        </div>
    </div>
);

const ProfileRow = ({ children }) => (
    <div className="profile-row">
        { children }
    </div>
);

const Avatar = ({ name, image }) => (
    <div className="profile-row__avatar">
        <img
            className="avatar__image"
            src={ image }
            alt={ `${name}'s avatar`}
        />
    </div>
);

const Description = ({ name, species, gender }) => (
    <div className="profile-row__desc">
        <h1 className="desc_name">{ name }</h1>
        <p>Species: { species }</p>
        <p>Gender: { gender }</p>
    </div>
);

const CharactersCards = ({ characters }) =>
    characters.map(({ name, image, species, gender }) => (
        <CharacterCard key={ name }>
            <ProfileRow>
                <Avatar image={ image } name={ name } />
                <Description gender={ gender } name={ name } species={ species }/>
            </ProfileRow>
        </CharacterCard>
    ));