Я пытаюсь создать книжное приложение, и я хочу, чтобы при нажатии кнопки для каждой книги всплывающее окно отображало информацию о книге. У меня есть компонент Book и компонент BookPopup, который вызывается компонентом Book, и я передаю реквизиты в компонент BookPopup. Проблема в том, что когда я нажимаю на кнопку «больше информации», она не генерирует всплывающее окно для нужной книги. Есть три книги подряд, и когда я нажимаю на кнопку «больше информации», в этих трех книгах создается, казалось бы, случайная книга. Я не уверен, что происходит. Вот мой код для компонента Book.
export default class Book extends Component {
constructor(props) {
super(props);
this.state = {
showPopup: true
};
}
togglePopup = () => {
this.setState({
showPopup: !this.state.showPopup
});
};
render() {
const { volumeInfo } = this.props.book;
let authors;
if (Array.isArray(volumeInfo.authors) && volumeInfo.authors.length > 0) {
authors = volumeInfo.authors.join(", ");
} else {
authors = null;
}
console.log(this.state.showPopup);
return (
<div>
<img src={volumeInfo.imageLinks.smallThumbnail} />
<div className="card-body">
<h6 className="card-title">{volumeInfo.title}</h6>
{console.log(volumeInfo.authors)}
<p>{authors}</p>
</div>
<ShelfChanger />
<button
type="button"
class="btn btn-info btn-lg"
data-toggle="modal"
data-target="#myModal"
onClick={this.togglePopup}
>
More Info
</button>
{this.state.showPopup ? <BookPopup info={volumeInfo} /> : null}
</div>
);
}
}
А для компонента BookPopup:
export default class BookPopup extends Component {
render() {
const {
authors,
title,
description,
publisher,
publishedDate,
industryIdentifiers,
imageLinks
} = this.props.info;
let stringAuthors;
if (Array.isArray(authors) && authors.length > 0) {
stringAuthors = authors.join(", ");
} else {
stringAuthors = null;
}
let ISBN_type;
let ISBN_num;
if (industryIdentifiers != undefined) {
ISBN_type = industryIdentifiers[0].type;
ISBN_num = industryIdentifiers[0].identifier;
}
return (
<div className="modal fade" id="myModal" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">{title}</h4>
<button type="button" className="close" data-dismiss="modal">
×
</button>
</div>
<div className="modal-body">
<img src={imageLinks.smallThumbnail} alt={title} />
<p className="book-description">Author(s): {stringAuthors}</p>
<p className="book-description">Description: {description}</p>
<p className="book-description">Publisher: {publisher}</p>
<p className="book-description">
Published Date: {publishedDate}
</p>
<p className="book-description">
{ISBN_type} : {ISBN_num}
</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-default"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
);
}
}
Родительский компонент компонента Book:
export default class BookList extends Component {
render() {
return (
<div className="book-list">
{this.props.books.map(book => {
return (
<div className="book-item card" key={book.id}>
<Book book={book} />
</div>
);
})}
</div>
);
}
}
Если кто-то может помочь, я был бы очень признателен. спасибо !!