0

Подскажите как мне правильно передать данные через props в компоненте. У меня есть компонента которая изначально была AllOrder и была работающей, затем я ее разбил на отдельные компоненты Orders и OrdersItem. Как мне правильно передать значения из компоненты OrdersItem в компоненту Orders. Проблема в том, что в компоненте OrderItem есть значения item.cost, item.description, item.title которые образовались из map объявленная уже в Orders. И я не понимаю как их правильно передать из-за map, чтобы правильно связать две компоненты Orders c OrdersItem между собой через props. Как правильно прописать значения в <OrderItem .../> находящаяся в компоненте Orders

Как выглядел рабочий код в большой компоненте 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 от AllOrder

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 item={this.props.}/>
                ))
                    : <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
                }
            </section>
    )
}
}
export default Orders;

Отделение компоненты OrderItem от Orders

class OrderItem extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            showModal: false
        }
    }
    handleModal = () => {
        this.setState({showModal: !this.state.showModal})
    }
    render() {
        return (
            <div key={this.props.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}>Стоимость: {this.item.cost} Р</p>
                        </div>
                        <p className={s.execution__name}>Название: <span>{this.item.title}</span></p>
                        <div className={s.execution__description}>{this.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;

1 ответ 1

0

codesandbox

// -------------------------------
import React from 'react';
import Item from './Item';

const ITEMS = [
  {
    id: '1',
    name: '1'
  },
  {
    id: '2',
    name: '2'
  }
];

const App = () => {
  const [currentItemState, setCurrentItemState] = React.useState({});

  React.useEffect(() => {
    console.log('currentItemState', currentItemState);
  }, [currentItemState]);

  return (
    <React.Fragment>
      {ITEMS.map((currentItem, currentItemIndex) => {
        return (
          <Item
            key={`item-${currentItem.name}-${currentItemIndex}`}
            states={{
              currentItemState: [currentItemState, setCurrentItemState]
            }}
            data={currentItem}
          />
        );
      })}
    </React.Fragment>
  );
};

export default App;
// -------------------------------

// -------------------------------
import React from 'react';

const Item = (properties) => {
  const { states, data, ...otherProperties } = properties;

  const [currentItemState, setCurrentItemState] = states.currentItemState;

  return (
    <div
      style={{
        marginBottom: 16
      }}
      {...otherProperties}
    >
      <div>id: {data.id}</div>
      <div>name: {data.name}</div>

      <button onClick={() => setCurrentItemState(data)}>Click</button>
    </div>
  );
};

export default Item;
// -------------------------------

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.