CODEWITHSUNDEEP
reactjs
yavg
yavg

Reputation: 3051

Object.keys does not render my view in react

I'm trying to render a view through an array Within Object.keys(data).map((section, i) I have put console.log (); and they show the information that it should show, but nothing is painted. What am I doing wrong?

 let data={
    "trucker": {
        "section": "camionero"
    },
    "client": {
        "section": "cliente"
    }
}
const [data, setData] = useState(data);

                        return (<List>
                            {
                                Object.keys(data).map((section, i) => {
                                    console.log("*", section, " ", data[section].section);
                                    /* result of console.log()
                                     * trucker   camionero
                                     * client   cliente
                                     * container   contenedor
                                    */
                                    return
                                    <ListItem itemHeader first key={i}>
                                        <Text>{data[section].section}</Text>
                                    </ListItem>
                                })
                            }

                        </List>)

Upvotes: 0

Views: 256

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187074

return
<ListItem itemHeader first key={i}>
  <Text>{data[section].section}</Text>
</ListItem>

The return keyword cannot be on its own line. JS interprets that as its own standalone statement and returns undefined instead of the value on the next line.

Add some parens to force it to return your JSX.

return (
  <ListItem itemHeader first key={i}>
    <Text>{data[section].section}</Text>
  </ListItem>
)

Further relevant reading

Upvotes: 3

Related Questions