Вывод списка валют на ReactJS

Question

Я делаю приложение о стоимости валют, которое имеет 2 таблицы:

Таблица стоимости всех валют (название валюты, цена, изменение за 24 часа и кнопка перехода на 2 таблицу)
Таблица стоимости выбранной валюты за 4 дня

Для вывода данных я использую API ЦБ РФ, то есть для первой таблицы - ссылку https://www.cbr-xml-daily.ru/daily_json.js
Чтобы получить данные для второй таблицы - ссылку вида https://www.cbr-xml-daily.ru/archive/${year}/${month}/${day}/daily_json.js, то есть делаю запрос на ссылку такого шаблона 4 раза

Собственно, сама проблема:
Данные в компонент первой таблицы я спокойно вывожу через метод map:

{
    props.result.length !== 0 ?
        props.result.map((elem, i) => {
            let className = "content-table-item"
            const calculation = props.result[i][5] - props.result[i][6]
            if (calculation <= 0) {
                className += ' negative'
            } else {
                className += ' positive'
            }
            return (
                <div className="section-content-table" key={i}>
                    <Tooltip title={props.result[i][4]} placement='right' arrow>
                        <div className="content-table-item">{props.result[i][2]}</div>
                    </Tooltip>
                    <div className="content-table-item">{props.result[i][6]}</div>
                    <div className={className}>
                        {(props.result[i][5] - props.result[i][6]).toFixed(4)}
                        {calculation >= 0 ? <AiOutlineRise size={14} className="chart" /> : <AiOutlineFall size={14} className="chart" />}
                    </div>
                    <div className="content-table-item"><NavLink to={'/table/' + props.result[i][0]} className="content-table-link">show more</NavLink></div>
                    </div>
                )})
        : <Loader />
}

А в компонент второй таблицы я не могу вывести данные, так как API не предусматривает запрос по конкретной валюте, из за чего мне приходится делать отдельный запрос на каждый день (action с запросом ниже):

export function fetchPreviousDate(date) {
    return async(dispatch) => {
        dispatch(buttonClickHandler())
    
        const currentDate = new Date();
        currentDate.setDate(currentDate.getDate() + date);
        const result = currentDate.toLocaleDateString()
        const day = result.slice(0, 2)
        const month = result.slice(3, 5)
        const year = result.slice(6)
        console.log(result)

        try {
            await axios.get(`https://www.cbr-xml-daily.ru/archive/${year}/${month}/${day}/daily_json.js`)
                .then(data => {
                    const answer = data.data.Valute
                    console.log(answer)
                    const answerArr = Object.keys(answer).map((value, i) => Object.values(answer[value]))
                    dispatch(tenDaysFetch(answerArr))
                })
        } catch (err) {
            console.log(err)
        }
    }
}

Все упирается в то, что нельзя сделать запрос по конкретной валюте, а только получить данные о всех валютах сразу. То есть я не могу просто воспользоваться роутингом и вывести данные о конкретной валюте, по которой был клик, а могу лишь получить данные о всех валютах сразу.
Не прошу готовое решение, но можно ли каким-либо образом вывести динамические данные в компонент без роутинга? Буду благодарен за подсказки о том, в каком направлении мне стоит думать при дальнейшем решении проблемы. На всякий случай, прилагаю ссылку на репозиторий: https://github.com/Listopad02/currency-stock
Огромное спасибо всем, кто откликнется

БЛОГ НА HUSL

Вывод списка валют на ReactJS

Ответы (0 шт):