State

  • Autor de la entrada:
  • Categoría de la entrada:React Native

Hay dos tipos de datos que controlan un componente, el state y los props, estos dos son objetos planos que contienen la información que se va a reflejar en el render, los props se pasan al componente, lo podemos ver como una función a la cual le estamos pasando parámetros,  los state los manipulamos dentro del componente y son el equivalente a una variable declarada dentro de una función como lo hacemos normalmente en javascript o cualquier otro lenguaje de programación.

En pocas palabras props y state es lo que vemos renderizado en pantalla, si quieres cambiar un valor de un state lo haces con setState el cual es asíncrono.

import React, { Component } from ‘react’;
import { StyleSheet, Text, View, Button, TextInput } from ‘react-native’;

class HolaEstados extends Component{

constructor(props){
super(props);
this.state = {
saludo : ‘Hola maestro’,
user: 225,
userName : »
}
}

sumarUsuario = () =>{
this.setState({
user : this.state.user + 1
})
}

render(){

let {saludo} = this.state
let {user} = this.state
let {userName} = this.state

return(
<View style={styles.container}>
<Text>{saludo} Usuario: {user}</Text>
<Text>Nombre de usuario: {userName}</Text>
<TextInput placeholder=»Usuario» onChangeText = {(userName) => this.setState({ userName }) }></TextInput>
<Button title=»Sumar usuario» onPress={this.sumarUsuario}></Button>
</View>
)
}
}

const styles = StyleSheet.create({
container:{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
}
})

export default HolaEstados