CODEWITHSUNDEEP
reactjs
Pierre
Pierre

Reputation: 35

Child component list not rendering

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

Upvotes: 2

Views: 39

Answers (2)

Tholle
Tholle

Reputation: 112917

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

Upvotes: 2

Danny Delott
Danny Delott

Reputation: 7008

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

Upvotes: 1

Related Questions