Есть каталог товаров. У каждого товара есть кнопка "Подробнее". Как сделать по нажатию кнопки вывод модального окна с информацией конкретно об этом товаре?
Понятно как вывести модальное окно прям в карточке, тогда легко передать информацию о продукте, но непонятно как открыть модальное окно в центре экрана, и также передать информацию о продукте, не понятно как это все организовать...
И вообще как делают модальные окна на реакте?
Структура каталога:
--- Catalog (сетка товаров)
--- --- Card (отдельно один товар)
PS. Поставил react-modal. В каталоге в цикле вывел массив модалок. Но это работает не так как нужно... В любом случае открывается окно с информацией о последнем товаре.
Как сделать чтобы у каждого окна была информация о том товаре на каком вызвали это окно?
const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'
}
};
class PizzaCatalog extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false
};
this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
componentDidMount() {
this.props.fetchAll();
}
openModal() {
this.setState({
modalIsOpen: true
});
}
afterOpenModal() {
this.subtitle.style.color = '#f00';
}
closeModal() {
this.setState({
modalIsOpen: false
});
}
render() {
return (
<div>
<Carousel />
<h1>Каталог товаров</h1>
<hr/>
<div className="wrapper">
{
this.props.catalog.map(product => (
<Card
className="col"
key={product.name}
addedToCart={this.props.checkIsProductAddedToCart(product.uid)}
product={product}
handleClick = { this.openModal }
/>
))
}
{
this.props.catalog.map(product => (
<Modal
isOpen={this.state.modalIsOpen}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
style={customStyles}
contentLabel="Example Modal"
>
<h2 ref={subtitle => this.subtitle = subtitle}>{ product.name }</h2>
<button onClick={this.closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
</form>
</Modal>
))
}
</div>
</div>
);
}
}
