JS map array to return object of arrays for React

Question

If I want to return an array of objects from a nested array in JS/React, what would be the way to do this? I have tried the following, but this gives an error about react children - objects cant be rendered as children try an array.

data:

{
      "title": 0,
      "name": 0,
      "score": 0,
      "summary": [
        {
          "id": 1,
          "start": "2019-11-01",
          "end": "2019-11-04"
        },
        {
          "id": 2,
          "start": "2019-11-01",
          "end": "2019-11-04"
        }
      ]
    } 

I have tried:

const newArray = result?.summary?.map((inner: any) => {
    return (
        {
            from: new Date(inner?.start),
            to: new Date(inner?.end),
            label: {
                text: (inner?.id),
            },
         }
    )
})

I want to create a new array of objects with the data from the summary nested array?

any idea's?

Answer 1

This is the issue. You need to convert your dates to strings . The third-party package you input this array tries to render the Date objects and fails to do so. The date is object type and that is what the error is all about.

Try this:

const newArray = result?.summary?.map((inner: any) => {
    return (
        {
            from: new Date(inner?.start).toString(),
            to: new Date(inner?.end).toString(),
            label: {
                text: (inner?.id),
            },
         }
    )
})

Use toDateString to get a formatted date string.

Answer 2

I have a different issue, but with similar data. I'm trying to create a React component which iterates through a collection and returns selected data from within each document, using the render() function. For the data above, the data-fetching part of my code within render() would look like this:

              {this.state.buttonClicked
                ? this.state.data.map(data => {
                    return (
                      <React.Fragment>
                      <tr>
                        <td 
                            style={{align: "left", width: "10%"}}
                            >{data.title}</td>
                        <td
                            style={{align: "left", width: "10%"}}
                            >{data.name}</td>
                        <td>{data.score}</td>
                        <td>{data.summary.start}</td>
                        <td>{data.summary.end}</td>
                        </tr>
                      </React.Fragment>
                    );
                  })
                : null}

I've tried putting array indexes into the expression, eg data.summary[1].start , but whatever I do the data from within the array doesn't appear.