CODEWITHSUNDEEP
listviewreact-native
alexandre
alexandre

Reputation: 195

react native list view not updating when row is a component with it's own state

Here are simplified exctracts of my main component : 

// this is only to simulate a change
componentDidMount() {
  setTimeout( () => {
    this.setState({
       dataSource: this.state.dataSource.cloneWithRows([ newVehicle ]),
    })
  }, 5000)
}

render() {
 return (
  <ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderVehicle}
  />
 )
}

renderVehicle(vehicle) {
  // here vehicle.name is properly updated
  return <Text>{vehicle.name}</Text> // this would be working
  return <Vehicle parentObject={ vehicle } /> // this is not working
}

Here is my vehicle component :

// In here it seams the component is not rebuilt,
// and this.props.parentObject is always the old value...

this.state = this.props.parentObject

return() {
  <Text>{this.state.name}</Text>
}

Note: in real life vehicle is a complexe component that needs to have it's own state.

Upvotes: 1

Views: 424

Answers (1)

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19049

As far as I understood the question, you need to use componentWillReceiveProps(nextProps:Object) in Vehicle and update the state with nextProps.

Simple example:

componentWillReceiveProps(nextProps) {
  const { name } = nextProps;

  this.setState({name});
}

Upvotes: 1

Related Questions