1

no sé mucho de react native, de hecho he comenzado a aprenderlo, pero me he topado con un problema que la verdad no le he encontrado solución, como hago para pasar un estado entre componentes, lo que hago es pasarlo por medio de los props, pero en el componente hijo me llega vacío y no he podido saber el porque, acá les explico un poco con el código.

Este es el componente padre

//importamos el componente hijo
import PlanetaTierra from './Componentes/Viewer/planetaTierra';

class App extends Component {
//creamos el constructor para utilizar los estados
  constructor(props){
    super(props);
    this.state={ peso : ''  };
  }

  
  render() {
        return (

      <ScrollView >
        <View style={styles.bloquePeso}>
          <Text style={{color: 'white'}}>Ingresa tu peso en kg</Text>
           //tengo entendido que como esta en el onchangeText me modifica el valor que tengo en el estado
          <TextInput onChangeText={value => this.setState({peso})} keyboardType='numeric' style={styles.inputText} placeholderTextColor="white" >{peso}</TextInput>
        </View>
        <View style={styles.container}>
//y acá se lo paso al componente hijo
          <PlanetaTierra peso={this.state.peso}></PlanetaTierra>
        </View>
        
       
      
        
      </ScrollView>
    );
  }
}

export default App;

y acá esta el código del componente hijo en el cual me llega vacío

class PlanetaTierra extends Component{
    render(){
        const {peso} = this.props;
        console.log(this.props);

        return (
            <View style={styles.container}>
                <View style={styles.bloquePeso}>
                    <Text style={{ color: 'white', paddingTop: 5 }}>Planeta Tierra</Text>
                </View>
    
                <View style={styles.bloqueImagenes}>
                    <Image style={{ width: 100, height: 100 }} source={require('../../src/img/planetaTierra.png')} />
                </View>
                <View style={styles.bloqueCarousel}>
                    <View style={{ flexDirection: 'column' }}>
                        <View style={styles.textoCarousel}>
                            <Text style={styles.texto}>{'Tu peso en este planeta \n es de :'+peso} </Text>
                        </View>
                        <View style={styles.textoCarousel}>
                            <Text style={styles.texto}>{'Se puede vivir hasta \n 80 años'} </Text>
                        </View>
                        <View style={styles.textoCarousel}>
                            <Text style={styles.texto}>Esta a 0 años luz </Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'column' }}>
                        <View style={styles.textoCarousel}>
                            <Text style={styles.texto}>{'La vida del planeta es \n de 4543 millones de años'}</Text>
                        </View>
                        <View style={styles.textoCarousel}>
                            <Text style={styles.texto}>Esta en la vía lactea</Text>
                        </View>
                        <View style={styles.textoCarousel}>
                            <Text style={styles.texto}>La gravedad es de 9.807 m/s2</Text>
                        </View>
                    </View>
                </View>
                <View style={styles.bloqueTexto}>
                    <Text style={styles.texto}>Worchock Company</Text>
                </View>
            </View>
        )
    }
}

espero que me puedan ayudar con este tema ya que me encuentro en fase de aprendizaje y sí me recomiendan algún curso en base a esto, estaré muy agredecido

1
  • Hola, para poder utilizar el import PlanetaTierra from ... te hace falta exportar la clase al final de su definición class PlanetaTierra extends Component{ ... } export default PlanetaTierra; el 15 ene. 2021 a las 20:45

1 respuesta 1

0

Hay que modificar la configuración del elemento TextInput:

<TextInput
      onChangeText={text => this.setState({peso:text})}
      value={value}
      />

Solo te faltaba asignar el valor de input a la propiedad peso del objeto state, que viene dada por text en el método onChangeText.

onChangeText :Callback that is called when the text input's text changes. Changed text is passed as a single string argument to the callback handler.

Puedes consultar la referencia con la version hooks de TextInput.

Nota: aseguarte de exportar el componente PlanetaTierra, al final de su archivo, tu ejemplo no lo tiene y asumo que se te paso agregarlo, no creo que este fue la causa del error, pues React se hubiera quejado antes de dejarte continuar con la operación del TextInput.

2
  • Muchas gracias bro, si era eso el 16 ene. 2021 a las 0:47
  • Qué bien, si consideras la respuesta como valida, vota por ella y acéptala, asi se mantiene el sitio bien documentado, Suerte y salud!
    – g.4
    el 16 ene. 2021 a las 1:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.