javascript_practice/my-app/src/App.js

import './assets/scss/_page-styles/rickandmortyapi.scss';

// hw19 (22.10.2022)

import dataEpisodes from './assets/json/dataEpisodes.json';
import dataCharacters from './assets/json/dataCharacters.json';

const CharactersItem = ({name, gender, image}) =>
    <li className="characters-list__item">
        <h3 className="characters-list__name">{name}</h3>
        <p>{gender}</p>
        <img className="characters-list__image"
             alt={name}
             src={image}
        />
    </li>

const EpisodeItem = ({name, air_date, children}) =>
    <>
        <h1 className="episode__name">{name}</h1>
        <time className="episode__air-date">{air_date}</time>
        {children}
    </>

const Episode = () =>
    dataEpisodes.map(item => (
        <div className="episode" key={Math.random()}>
            <EpisodeItem name={item.name}
                         air_date={item.air_date}
            >
                <ul className="characters-list">
                    {dataCharacters.map(character => (
                        <CharactersItem key={Math.random()}
                                        name={character.name}
                                        gender={character.gender}
                                        image={character.image}
                        />
                    ))}
                </ul>
            </EpisodeItem>
        </div>
    ))

const App = () =>
    <div className="App">
        <section className="episodes">
            <Episode />
        </section>
    </div>

export default App;