javascript - React onClick listItem 显示来自 JSON 的选定 listItem 的数据

Question

我是编码世界的新手。学习react和json。我正在研究三个链接在一起的不同面板。我想在第三个面板上显示 list 答案。

第一个面板:
显示:所有esn("4667","4668")
onclick 第一个 esn:"4667"它应该在第二个面板上显示 esn:"4667"的所有 gmtdatetime。
第二个面板:
显示:esn所有gmtdatetime:"4667"('2018-08-31 03:22:16','2018-08-30 03:12:16')
onclick 在第一个 gmtdatetime '2018-08-31 03:22:16' 上，它应该在该 gmtdatetime '2018-08-31 03:22:16' 的第三个面板上显示问题+答案。
第三个面板:
它应该以这种格式显示第一个 gmtdatetime 的所有值(问题+答案)。我想显示是或否而不是真或假。
问题解答
问题 1 正确 =="is"
问题 2 true =="is"
问题 3 false ==“否”
问题 4 true =="is"

原始代码:react-editor

输出

  onClick on ESN ("4667") =>
                          onClick Date & Time ("2018-08-31 03:22:16") =>  
                                               Checklist (Question + Answer)
                                              "question 1"  true == "YES"
                                              "question 2"  true == "YES"
                                              "question 3"  false == "NO"
                                              "question 4"  true == "NO"

我的 json 数据如下所示

    [
    {
        esn: '4667',
        completed_checklists: [
            {
                gmtdatetime: '2018-08-31 03:22:16',
                answers: ['true','true','false','true']
            },
            {
                gmtdatetime: '2018-08-30 03:12:16',
                answers: ['false','true','true','true']
            }
        ],
        question: ['question 1','question 2','question 3','question 4']
    },
    {
        esn: '4668',
        completed_checklists: [
            {
                gmtdatetime: '2017-08-31 03:22:16',
                answers: ['true','false','false','true']
            },
            {
                gmtdatetime: '2017-08-31 03:23:16',
                answers: ['true','false','false','true']
            }
        ],
        question: ['question 1','question 2','question 3','question 4']

    },

]

问题获取第二个面板和第三个面板上的所有数据。

谢谢

Answer 1

您好，我已经 fork 了您的代码，我想这就是您想要的 here