Object.keys does not render my view in react

Question

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>)

I suspect an ASI (automatic semicolon insertion) issue here as you put `` under the `return` statement. Either wrap your return value inside `()` or put `` on the same line as the `return` statement. — customcommander, Dec 21 '19 at 00:01
@customcommander If I make a consel.log () inside the first .map information is displayed. I don't know why the content inside it is not shown — yavg, Dec 21 '19 at 01:52
Because you didn't put the return value __on__ the same line as the `return` statement, the `return` statement evaluates to `undefined`. To prevent that wrap your component inside `(` and `)` and put the opening paren __on__ the same line as the `return` statement. — customcommander, Dec 21 '19 at 02:01

score 3 · Accepted Answer · answered Dec 21 '19 at 00:00

3

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

answered Dec 21 '19 at 00:00

Alex Wayne

178,991
47
309
337

If I make a consel.log () inside the first .map information is displayed. I don't know why the content inside it is not shown – yavg Dec 21 '19 at 01:52

Object.keys does not render my view in react

1 Answers1