Блог

Привет, я только начинаю использовать react-bootstrap. что мне нужно сделать, это зациклить список фильмов, тогда в каждой строке будет отображаться модальная информация о фильме.

вот мой компонент с циклом .map для списка фильмов:

                     {   
                        this.state.movies
                        ? this.state.movies.map((object, i)=>{
                            return (
                                <div obj={object.imdbID} key={i}>
                                    <ListGroup.Item>
                                        <Row>
                                            <Col md={5}>
                                                <MovieModal key={i} 
                                                    onShowModal = {this.handleShowModal}
                                                    onHideModal = {this.handleHideModal}
                                                    modal = {this.state.modal}
                                                    movie = {object}
                                                    index = {i}
                                                ></MovieModal>
                                            </Col>
                                            <Col md={2}>{object.Year}</Col>
                                            <Col md={3}>{object.imdbID}</Col>
                                            <Col md={2}>
                                                {
                                                    object.Fav
                                                    ? <img src={`../assets/golden-star.png`} alt="star"></img>
                                                    : <img src={`../assets/star.png`} alt="star"></img>
                                                }
                                            </Col>
                                        </Row>
                                    </ListGroup.Item>
                                </div>
                            )
                        })

                        : <h1>not found</h1>
                    }
  

и вот модальный компонент

             <div>
                <p onClick={this.props.onShowModal}>{this.props.movie.Title} {this.props.index}</p>
                <Modal show={this.props.modal} onHide={this.props.onHideModal} backdropClassName={'modal-backdrop'}>
                    <Modal.Header closeButton>
                        <Modal.Title>{this.props.movie.Title} {this.props.index}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <h1>test body</h1>
                    </Modal.Body>
                    <Modal.Footer>
                        <h1>test footer</h1>
                    </Modal.Footer>
                </Modal>
            </div>
  

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

 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: 

```

I already make sure the function works well, it tested without looping. what should I do to make it just show one modal when I click?
  

Если я правильно понимаю, вам нужен модал, который отображает список фильмов.

Ваш код создает несколько модальностей, потому что вы рендерите модальный фильм в каждом цикле.

Попробуйте наоборот. Вставьте список в модальный.

 
const movies = {} // I'm assuming you have your movies object in a const

// use object deconstruction to create a list of ListGroup.Items
const MovieList = ({ movies }) => 
    movies.map( (movie, index) => (
        <ListGroup.Item key={movie.imdbID}>
            <Row>
                <Col md={2}>{movie.Year}</Col>
                <Col md={3}>{movie.imdbID}</Col>
            </Row>
        </ListGroup.Item>
    ));

... render ( ...

            <div>
                <p onClick={this.props.onShowModal}>{this.props.movie.Title} {this.props.index}</p>
                <Modal show={this.props.modal} onHide={this.props.onHideModal} backdropClassName={'modal-backdrop'}>
                    <Modal.Header closeButton>
                        <Modal.Title>{this.props.movie.Title} {this.props.index}</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <ListGroup>                          {/* <----- put your list const here */}
                            <MovieList movies={movies} />
                        </ListGroup>
                    </Modal.Body>
                    <Modal.Footer>
                        <h1>test footer</h1>
                    </Modal.Footer>
                </Modal>
            </div>