Как сделать так, чтобы мод начальной загрузки содержал реквизиты определенного кликаемого элемента (контейнера div) из списка элементов? - PullRequest
Новая
       27

Как сделать так, чтобы мод начальной загрузки содержал реквизиты определенного кликаемого элемента (контейнера div) из списка элементов?

0 голосов
/ 17 апреля 2019

Я хочу создать загрузочное модальное всплывающее окно, которое будет содержать информацию о конкретном элементе div, по которому щелкнули. Как я могу сделать так, чтобы модал заполнялся всеми данными из этого конкретного элемента?

Я уже пытался сделать так, чтобы данные, передаваемые из MovieList, передавались дальше в модальный компонент, но он всегда отображает только первый элемент из списка.

Итак, у меня есть 3 компонента. MoviesList, который перебирает массив фильмов, поступающих из API, который отображает компонент Movie для каждого фильма в массиве. А затем у меня есть этот MovieModal, который предназначен для хранения данных фильма по клику.

MovieList.jsx 

import React from 'react';
import Movie from './Movie.jsx';

export default ({collection}) =>  (
    <div className='container'>
        <div className='row'>
            <div className='panel-group'>
                {collection.map(movie => (
                        <Movie data={movie} key={movie.id} />
                ))}
            </div>
        </div>
    </div>
);

Movie.jsx 

import React, { Fragment } from 'react';
import gen from '../../assets/genres.js';
import { IMG_URL } from '../../assets/api_bits.js';
import MovieModal from './MovieModal.jsx';

export default ({data}) =>  (
    <Fragment>
        <div 
            className='panel'
            type='button'
            data-toggle='modal'
            data-target='#myModal'
        >
            <img className="panel-img" src={`${IMG_URL}` + data.poster_path} alt={data.title} />
            <div className="panel-body">
                <h3 className='panel-title'>
                    { (data.title || data.original_name).length >= 24 
                        ? (data.title || data.original_name).slice(0, 24).concat('...') 
                        : data.title || data.original_name }
                </h3>
                <h4 className="panel-genres">
                    {gen.map (genre => (
                        data.genre_ids.includes(genre.id) 
                            ? `${genre.name}\xa0\xa0` 
                            : null
                    ))}
                </h4>
                <h5 className="panel-rating">
                    <p>
                        <i className="fas fa-heart"></i>
                        &nbsp;
                        <span>{data.vote_average}</span>
                    </p>
                </h5>
            </div>

            <MovieModal />
        </div>
    </Fragment>
)

MovieModal.jsx 

import React from 'react';

export default () => (
    <div className='modal fade' id='myModal'>
        <div className='modal-dialog modal-lg'>
            <div className='modal-content'>
                ...
            </div>
        </div>
    </div>
);
...