Подскажите как мне правильно передать данные через props в компоненте. У меня есть компонента которая изначально была
AllOrder и была работающей, затем я ее разбил на отдельные компоненты
Orders и
OrdersItem. Как мне правильно передать значения из компоненты
OrdersItem в компоненту
Orders. Проблема в том, что в компоненте OrderItem есть значения
item.cost,
item.description,
item.title которые образовались из map объявленная уже в Orders. Я не понимаю как их правильно передать в из-за
map, чтобы правильно связать две компоненты
Orders c
OrdersItem между собой через props
Как выглядел рабочий код в большой компоненте
AllOrder до разделения на отдельные компоненты
class AllOrder 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})
// return <div>Testing</div>
}
render(){
const {col, data2, isFetching, error } = this.state;
if (isFetching) return <div>...Loading</div>;
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>
<section className={s.execution}>
{col ? data2["_embedded"]["orderEntities"].map((item, index) => (
<div className={s.execution__container}>
<div 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}>
<img className={s.execution__img} src="https://s8.********************/uploads/images/2020/11/830b09a113baebf4d6272d86719a2bde.png" alt="" />
<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>
{/* <Modal /> */}
</>
);
}
}
export default AllOrder;
Компонента Orders
class Orders extends React.Component {
constructor(props){
super(props);
this.state = {
col: 0,
data2: {},
isFetching: true,
error: null,
}
}
componentDidMount(){
fetch('/api/orderEntities')
.then(res => res.json())
.then(res2Json => this.setState({col:1, data2: res2Json, isFetching: false}))
}
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) => (
<OrderItem/>
))
: <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
}
</section>
)
}
}
export default Orders;
Компонента OrdersItem
class OrderItem extends React.Component {
constructor(props){
super(props);
this.state = {
showModal: false
}
}
handleModal = () => {
this.setState({showModal: !this.state.showModal})
}
render() {
return (
<div key={item.id} className={s.execution__container}>
<div 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={this.index} className={s.execution__button}>откликнуться</button>
{this.state.showModal && <Modal handleModal={this.handleModal} />}
<p className={s.execution__participants}>0 участников</p>
</div>
</div>
</div>
)
}
}
export default OrderItem;
