Как передать массив, сформированный в компоненте, в другой компонент?

Question

[understyle]

Собственно задача:
По условию "true" выводится компонент Order. По условию false формируется массив карт с датами, где нужно сформировать новый массив доступного времени и передать его в Order. По нажатию на карту вызывается событие choseDateEvent, которое меняет состояния с true на false.
Но в моем примере в компоненте Days массив availibleTime формируется , но компонент Order получает его пустым, что логично...
Каким образом можно передать новый массив availibleTime в компонент Order?

import React, { Fragment } from 'react';
import moment from 'moment-with-locales-es6';

import './Days.css';

export const Days = ({choseDateEvent, choseDateStatus, dataTimes}) => {

    const arrTimes = dataTimes.data;
    const arrayDate = []; 
    for(let i=0; i<16; i++){
        arrayDate.push(i)
    }
    let startDate = moment().add(1,'days');
    let counter = 0;
    const availableTime = [];
	
    return <Fragment>
        <div className='cardContent'>
            <div>
                <h2>Выберите дату:</h2>
                <div className="row p-4">
                    {
                        choseDateStatus 
			? <Order />
                        : arrayDate.map((item) => {
                            return <div key={item} className="card col-3" onClick={() => choseDateEvent()}>
                                    <div className="card-body">
                                        <h5 className="card-title">{startDate.add(1, 'days').locale('ru').format('DD MMMM')}</h5>
                                        <h5 className="card-title">{startDate.locale('ru').format('dddd')}</h5>
                                        {
                                           arrTimes?.map(item => {
                                            const dateTime = item.attributes.datetime;
                                            const date = startDate.locale('ru').format('YYYY-MM-DD');
                                            
                                             if (dateTime.includes(date)) {
												availableTime.push(dateTime);
                                                return  <div key={item.id}>Доступно записей: {++counter}</div> 
                                             }
                                           }) 
                                        }
                                    </div>
                            </div>
                        })
                    }
                </div>
            </div>
        </div>
    </Fragment>
}

Answer 1

[Вадим Рябов]

Самое важное - тебе не стоит формировать этот массив в JSX. Оставь его для отображения. Конечно, реализовывать условный рендеринг и прочие мелкие штучки можно. Но компоненты лучше разбивать на содержащие логику и презентационные.

К твоему вопросу - у тебя есть пропс choseDateStatus. Если эта переменная false, то сгенерируй новый, тебе нужный массив (как ты это делаешь в JSX). Но сделай это перед return (это место для логики), а не в JSX. Для этого тебе пригодится useEffect для управления жизненным циклом компонента и useState для хранения данных (состояния твоего компонента)

например:

export const Days = ({ choseDateEvent, choseDateStatus, dataTimes }) => {
const [yourArray,  setYourArray] = useState([])

useEffect(() => {
if (choseDateStatus) {
// code when condition true
setYourArray(...) // some array you need
} else {
// code when condition false
setYourArray(...) // some array you need
}
// do re-render when choseDateStatus changed
}, [choseDateStatus])

 return (
...
<Order availibleTime={yourArray} />
...
)}

Не забудь принять данные в качестве пропса availibleTime в Order компоненте. Удачи с React ;)