Unexpected token on render react

Question

I have the following code which I expect would display a list of keys and values:

 render() { let content; if (this.props.json != null) { content = { Object.keys(this.props.json.fields).map(function (key) { return <div>Key: {key}, Value: {this.props.json.fields[key]}</div>; }) } } return ( <div> {content} </div> ) } 

However, for some reason i get this error:

Parsing error: Unexpected token, expected ","

Which points to the "Object.keys" I don't understand what I'm doing wrong, I've searched the internet and have seen ALOT of examples like this which work

Answer 1

Since you're wrapping "Object.keys..." with curly braces, you're declaring the content variable as an object. You can declare it without the curly braces, then content will be an array, and that should render properly.

if (this.props.json != null) {
    content = Object.keys(this.props.json.fields).map(function (key) {
        return <div>Key: {key}, Value: {this.props.json.fields[key]}</div>;
    });
}