@Dizbalans

Как выводить вложенные массивы, с API в ReactJS?

Я получаю данные с API Rick and Morty , и хочу что- бы в модальном окне каждого персонажа выводились эпизоды где он поучаствовал. Эти эпизоды хранятся в вложенном массиве этой API .
<div className={"dop_char"}>
                    {searchArr.map((item, index) => {
                        return (
                            <div key={index} className={"char__cart"}>
                                <img className={"img__arr"} src={item.image} alt="alt"/>
                                <p className={"planet__name"}>{item.name}</p>
                                <p>{item.gender}</p>
                                <p>{item.status}</p>
                                <button className={"button__modal"} onClick={()=> setModalActive(true)}>Info</button>
                                <ModalJs active={modalActive} setActive={setModalActive} >
                                    {
                                        item.episode.map((episode)=> {
                                            console.log(episode,"ON")
                                            return (
                                                <p>
                                                    {episode}
                                                </p>
                                            )
                                        })
                                    }
                                </ModalJs>
                            </div>
                        )
                    })}
                </div>


Я столкнулся с проблемой , что мне отрисовывает все эпизоды. Даже те в которых персонаж не был.
636c161348457029727538.png
Это массив моего первого персонажа .
636c1672a0725159551611.png
Вот что выводит моё модальное окно.
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 1
Alexandroppolus
@Alexandroppolus
кодир
Похоже, у тебя на всё про всё только один useState для modalActive, и при клике по кнопке Info все модалки всплывают на свет божий.

храни в стейте name (или id) выбранного персонажа
для модалки устанавливай проп active={item.name === activeName}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
30 янв. 2023, в 23:32
5000 руб./за проект
30 янв. 2023, в 23:11
500 руб./за проект