Динамический выбор пары ключ-значение json в React

У меня есть такой json:

{
    "index": 1,
    "ln": "27953",
    "name": "Product 1",
    "availability": {
        "day0726": "G",
        "day0727": "G",
        "day0728": "G",
    }
}

И я хотел бы отображать доступность динамически в зависимости от того, какая это дата. «day0726» - это, например, 26 июля. Как я могу отобразить значение правильного дня, используя следующий фрагмент кода:

import React from "react"
import Product from "./Product"

const Productlist = ({ prodlist }) => {
    return (
        <div>
            {
                prodlist.map((item, i) => {
                    return (
                        <Product
                            key = {prodlist[i].index}
                            name = {prodlist[i].name}
                            ln = {prodlist[i].ln}
                            availability = {*this is I want to change dynamically*}
                        />
                    )
                })
            }
        </div>
    )
}

export default Productlist 

Можно ли это сделать или ход мыслей совершенно неверен?

Заранее спасибо!

Обновлено: Я могу изменить формат ключа даты на любой, если это необходимо.

date API имеет другой формат. Возможно, вам придется указать вашу доступность

Sakhi Mansoor 02.09.2018 17:38
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
121
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала вам нужно создать дату в формате, который у вас есть, а затем вы можете использовать это в компоненте, чтобы получить продукты availability с определенным ключом:

let date = new Date();
function str_pad(n) {
    return String("00" + n).slice(-2);
}
date = "day"+(str_pad(date.getMonth()+1))+str_pad(date.getDate());

console.info(date)
import React from "react"
import Product from "./Product"

let date = new Date();
function str_pad(n) {
  return String("00" + n).slice(-2);
}
date = "day"+(str_pad(date.getMonth()+1))+str_pad(date.getDate());


const Productlist = ({ prodlist }) => {
    return (
        <div>
            {
                prodlist.map((item, i) => {
                    return (
                        <Product
                            key = {prodlist[i].index}
                            name = {prodlist[i].name}
                            ln = {prodlist[i].ln}
                            availability = {prodlist[i].availability[date]}
                        />
                    )
                })
            }
        </div>
    )
}

export default Productlist 

Другие вопросы по теме