Estoy trabajando en una aplicación y tengo problemas con el Componente C que no reconoce un cambio de accesorio del Componente A. Tengo que pasar el accesorio del Componente A al Componente B y luego al Componente C.

Eliminé un montón de código de los fragmentos porque estos componentes tienen más de 400 líneas.

El componente A se parece a:

 selectPeripheral = (peripheral, index) => { console.log(peripheral) // what peripheral looks like // {"id":"27646F75-4D53-834F-BF94-4F1B975626CD","name":"LEDDMX-013176"} // or // {"id":"8371C1D0-1F5A-EB7E-C83C-193A7BC26F7F","name":"LEDBLE-061E8A"} this.props.navigation.navigate('ColorPickerIndex', { screen: 'ColorPicker', params: { selectedPeripheral: peripheral }, }); } render() { { this.state.nearbyDevices.map((peripheral, index) => { return <TouchableOpacity key={`key-${index}`} onPress={() => this.selectPeripheral(peripheral, index)} > <Text>{peripheral.name}</Text> <Text>LED light</Text> </TouchableOpacity> }) } }

Componente B:

 class ComponentB extends Component { constructor(props) { super(props); this.state = { selectedLight: this.props.route.params.peripheral } } render() { <ComponentC selectedPeripheral={this.state.selectedLight} /> }

El componente C se parece a:

 const ComponentC = ({ selectedPeripheral }) => { return( <Text>{selectedPeripheral.name}</Text> ) }

Esto funciona solo para el primer periférico. Cuando selecciono un periférico diferente, el componente C aún muestra el primer periférico seleccionado y no el periférico diferente.

¿Qué puedo hacer para actualizar el Componente C con el nuevo periférico?