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

Question

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

第一面板：
显示：所有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的所有值（问题+ answer）。 我要显示是或否，而不是是或否。
问题答案
问题1是==“是”
问题2是==“是”
问题3否==“否”
问题4是==“是”

原始代码： 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

嗨，我有你的代码，我想这就是你在这里

Answer 2

此答案显示了完整的解决方案，其中true == YES和false == NO ：

https://stackblitz.com/edit/react-wej2w1