title: How to map objects in state to a dynamic list in reactJS
body: <p>As of my current knowledge now, I know that you can map an array from state to HTML elements and can make an array of elements that can repeat itself over and over again. However, is that any way for me to do the same but to map out items into a list so I can dynamically populate my dictionary?</p>
  <p>So what I want is to have this:</p>
  <pre><code>this.setState({         
      series: [
      {
          name: 'Bob',
          data: [
          {
              x: 'Block 396 HDB Tampines',
              y: [
              new Date('2019-03-05').getTime(),
              new Date('2019-03-08').getTime()
              ]
          },
          {
              x: 'Eastpoint Mall',
              y: [
              new Date('2019-03-02').getTime(),
              new Date('2019-03-05').getTime()
              ]
          },
          {
              x: 'Bata',
              y: [
              new Date('2019-03-05').getTime(),
              new Date('2019-03-07').getTime()
              ]
          },
          {
              x: 'Barracuda Tech',
              y: [
              new Date('2019-03-03').getTime(),
              new Date('2019-03-09').getTime()
              ]
          },
          {
              x: 'Aromas of India',
              y: [
              new Date('2019-03-08').getTime(),
              new Date('2019-03-11').getTime()
              ]
          },
          {
              x: '517 Food court',
              y: [
              new Date('2019-03-11').getTime(),
              new Date('2019-03-16').getTime()
              ]
          },
          ]
      },
      {
          name: 'Joe',
          data: [
          {
              x: 'Aljunied Industrial Estate',
              y: [
              new Date('2019-03-02').getTime(),
              new Date('2019-03-05').getTime()
              ]
          },
          {
              x: 'Bata',
              y: [
              new Date('2019-03-06').getTime(),
              new Date('2019-03-16').getTime()
              ]
          },
          {
              x: 'YinJi Singapore',
              y: [
              new Date('2019-03-03').getTime(),
              new Date('2019-03-07').getTime()
              ]
          },
          {
              x: 'Aromas of India',
              y: [
              new Date('2019-03-20').getTime(),
              new Date('2019-03-22').getTime()
              ]
          },
          {
              x: 'Djitsun Mall',
              y: [
              new Date('2019-03-10').getTime(),
              new Date('2019-03-16').getTime()
              ]
          }
          ]
      },
      ],
  })
  </code></pre>
  <p>Above is what I want to have as my final outcome</p>
  <p>Below is the code that I have been trying but it seems impossible</p>
  <pre><code>this.setState({
              series: [
                  ...this.state.suspectCases.map(suspect =&gt; {
                      return{
                          name: suspect.firstName + &quot; &quot; + suspect.lastName,
                          data:[
                              {
                                  x: 'Block 396 HDB Tampines',
                                  y: [
                                  new Date('2019-03-05').getTime(),
                                  new Date('2019-03-08').getTime()
                                  ]
                              },
                              {
                                  x: 'Eastpoint Mall',
                                  y: [
                                  new Date('2019-03-02').getTime(),
                                  new Date('2019-03-05').getTime()
                                  ]
                              },
                              {
                                  x: 'Bata',
                                  y: [
                                  new Date('2019-03-05').getTime(),
                                  new Date('2019-03-07').getTime()
                                  ]
                              },
                              {
                                  x: 'Barracuda Tech',
                                  y: [
                                  new Date('2019-03-03').getTime(),
                                  new Date('2019-03-09').getTime()
                                  ]
                              },
                              {
                                  x: 'Aromas of India',
                                  y: [
                                  new Date('2019-03-08').getTime(),
                                  new Date('2019-03-11').getTime()
                                  ]
                              },
                              {
                                  x: '517 Food court',
                                  y: [
                                  new Date('2019-03-11').getTime(),
                                  new Date('2019-03-16').getTime()
                                  ]
                              },
                          ]
                      }
                      
                  })            
              ]
          })
  </code></pre>
  <p>Are there any ways to do this? Or is this impossible and requires other backends to do it?
  P.S.: I have not done anything for the data as I was still trying to see if the name works first</p>