Я еще новичок в JavaScript с React и пока не совсем понимаю как решать данную проблему. У меня есть определенный список который отображается методом
map из сервера занесенная в отдельную компоненту
Orders, у этого списка имеется кнопка
button в компоненте
Orders, кнопок может быть неограниченное количество в зависимости от того сколько данных выгружаемых из сервера в JSON. При клике по какой-нибудь кнопке у меня на ней должно отображаться
всплывающее(модальное) окно функционал которого прописан в функции
handleModal, находящийся в компоненте
Orders, но всплывающее окно отображается на всех кнопках в блоках при клике. Как мне в этом случае изменить код так, чтобы всплывающее окно отображалось на той на которую я нажал. Догадываюсь, что что-то наверное надо делать со стейтом и пропсами, но не понимаю как осуществить. Для понимания прикрепляю
JSX компоненты
AllOrders и вынесенной компоненты
Orders, а также результат при нажатии кнопки откликнуться
Test отображается на всех кнопках, а должен лишь на той которая была нажата
Главная компонента
AllOrder
class AllOrder extends React.Component{
render(){
return(
<>
<section className={s.orders}>
<div className={s.orders__container}>
<h1 className={s.orders__title}>Все заказы</h1>
<form className={s.orders__form}>
<input className={s.orders__input} type="date" placeholder="Срок до:" data-toggle="tooltip" title="" data-original-title="Срок до:"/>
<input className={s.orders__input} type="text" placeholder="Стоимость от:" data-toggle="tooltip" title="" data-original-title="Только цифры"/>
<input className={s.orders__input} type="text" placeholder="Стоимость до:" data-toggle="tooltip" title="" data-original-title="Только цифры"/>
<select name="" id="" className={s.orders__region}>
<option value="" required>Регион</option>
</select>
<select name="" id="" className={s.orders__city}>
<option value="" required>Мой город</option>
</select>
<select name="" id="" className={s.orders__service}>
<option value="" required>Услуга</option>
</select>
<input className={s.submit} type="submit" value="Найти"/>
<br/>
<div className={s.orders__label}>
</div>
</form>
</div>
</section>
<Orders/>
</>
);
}
}
export default AllOrder;
Вынесенная компонента
Orders
class Orders extends React.Component {
constructor(props){
super(props);
this.state = {
col: 0,
data2: {},
isFetching: true,
error: null,
showModal: false
}
}
componentDidMount(){
fetch('/api/orderEntities')
.then(res => res.json())
.then(res2Json => this.setState({col:1, data2: res2Json, isFetching: false}))
}
handleModal = () => {
this.setState({showModal: !this.state.showModal})
}
render(){
const {col, data2, isFetching, error } = this.state;
if (isFetching) return <div>...Loading</div>;
return(
<section className={s.execution}>
{col ? data2["_embedded"]["orderEntities"].map((item, index) => (
<div className={s.execution__container}>
<div key={item.id} className={s.execution__box}>
<div className={s.execution__info}>
<div className={s.execution__list}>
<p className={s.execution__services}>Услуга:</p>
<p className={s.execution__services}>Срок исполнения: до 30.09.2020</p>
<p className={s.execution__services}>Стоимость: {item.cost} Р</p>
</div>
<p className={s.execution__name}>Название: <span>{item.title}</span></p>
<div className={s.execution__description}>{item.description}</div>
<p className={s.execution__user}>Заказчик: <a href="#" className="execution__link"></a> <img src="https://s8.********************/uploads/images/2020/11/6ef562d4767cba575a5ac931c26e6bdb.png" alt="" /></p>
</div>
<div className={s.execution__info}>
<button id={index} onClick={this.handleModal} className={s.execution__button}>откликнуться</button>
{this.state.showModal && <Modal handleModal={this.handleModal} /> }
<p className={s.execution__participants}>0 участников</p>
</div>
</div>
</div>
))
: <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
}
</section>
)
}
}
export default Orders
Средний