Child component list not rendering - reactjs

Question

I am trying to render a list using a child component and it ends up not rendering anything.
Snippet in PropertyBar component:
updateSelectedCell() {
if (graph.selectedCell != null) {
this.setState({
selectedCell: graph.selectedCell,
cellProperties: Array.from(graph.selectedCell.value.attributes)
});
}
}
renderPropertyList() {
this.state.cellProperties.map(key => {
<PropertyBarItem name={key.nodeName} value={key.nodeValue} />
})
}
render() {
if (this.state.selectedCell != null) {
return (
<div>
<Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
<List>
{this.renderPropertyList}
</List>
</div>
)
}
return (
<div>
<Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
<List>
<p>Click on a cell to view its properties.</p>
</List>
</div>
)
}
When a user clicks on the button, it updates the state with an array then should render a list of PropertyBarItem with the keys inside the array. It ends up not displaying anything, but doesn't crash. Testing using a simple p tag and it also does not render anything:
renderPropertyList() {
this.state.cellProperties.map(key => {
<p> {key} </p>
})
}

Answer 1

You are not invoking the renderPropertyList method. Add () to invoke it.
<div>
<Button
variant="contained"
color="primary"
fullWidth={true}
onClick={() => this.updateSelectedCell()}
>
View properties
</Button>
<List>{this.renderPropertyList()}</List>
</div>
You must also return the result from renderPropertyList and return the JSX from the function given to map as well.
renderPropertyList() {
return this.state.cellProperties.map(key => {
return <PropertyBarItem name={key.nodeName} value={key.nodeValue} />
})
}

Answer 2

You're missing the return statement:
renderPropertyList() {
return this.state.cellProperties.map(key => {
<PropertyBarItem name={key.nodeName} value={key.nodeValue} />
})
}
Also, be sure to invoke the method:
if (this.state.selectedCell != null) {
return (
<div>
<Button variant="contained" color="primary" fullWidth={true} onClick={() => this.updateSelectedCell()}> View properties </Button>
<List>
{this.renderPropertyList()}
</List>
</div>
)
}