Interact over object of arrays React JS

Question

I have an object like this one:

[
    {
        "periodname": "Test",
        "periodtime": ""
    },
    {
        "periodname": "",
        "periodtime": ""
    }
]

And I want to render a Col for each array inside of it. My React code:

function renderMyPage(props) {

const { myObject } = props

const renderMyPage = () => {
     return [myObject].map((c,i) => {
        return(
            <Col>
              My data here  
            </Col>
          )
       })
    }
}

But I always get only one result, even if I have two or more arrays inside my object.

If I interact again with map or foreach I get the same object. If I use the map function without using "[]" on the object I get an error:

Uncaught TypeError: Cannot read property 'map' of undefined

What I'm doing wrong to get only one result? Tried a lot of other questions around StackOverflow questions but I'm getting the same result.

Volodymyr Sen · Accepted Answer · 2021-09-30 20:26:36Z

1

As a quick solution try

const renderMyPage = () => {
     return myObject?.map((c,i) => {
        return(
            <Col>
              My data here  
            </Col>
          )
       })
    }
}

or

const renderMyPage = () => {
     if (!myObject) return null;
    
     return myObject.map((c,i) => {
        return(
            <Col>
              My data here  
            </Col>
          )
       })
    }
}

edited Sep 30, 2021 at 20:26

answered Sep 30, 2021 at 20:24

Volodymyr Sen

1035 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

koorkevani Over a year ago

If you want to tell the TypeScript compiler that you know for sure myObject is defined, you can use return myObject!.map(...

Collectives™ on Stack Overflow

Interact over object of arrays React JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related