How to correctly pass data through props in a React component?

Question

React

Tell me how to correctly pass data through props in the component. I have a component that was originally AllOrder and was working, then I split it into separate components Orders and OrdersItem . How do I correctly pass values ​​from the OrdersItem component to the Orders component . The problem is that in the OrderItem component there are item.cost , item.description , item.title values ​​that were formed from the map declared already in Orders. I don't understand how to correctly pass them to because of map in order to correctly connect the two Orders components with OrdersItembetween each other via props

How the working code looked in a large AllOrder component before splitting into separate components

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 component

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 component

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;

Answer 1

If I understand you correctly, then you can pass the desired item inside the OrderItem inside the map loop

{col ? data2["_embedded"]["orderEntities"].map((item, index) => (
  <OrderItem item={item} />

  // Либо так
  <OrderItem {...item} />
))