Estados

¿ Estado?

Los componentes en React pueden o no tener estados, y su función es muy importante porque si estos cambian automáticamente el componente asociado se actualizará.

Por ejemplo si tenemos un estado con datos asignados y luego los actualizamos, React se da cuenta que hubo un cambio y vuelve a ejecutar el método render() mostrando los últimos datos asignados.

Definición de estados

class ComponenteFuncional extends React.Component
{	
	constructor(props)
	{
		super(props)
		this.state = {nombres:[‘Julieta’,’Maria’,’Mariana’] }
	}

	render()
	{
		return( 
			<div> <ul> 
				{this.state.nombres.map((nombre) =>
					<li> {nombre} </li>
				)}
			</ul></div> 
		)
	}
}
export default ComponenteFuncional

Cambio de estados

class ComponenteFuncional extends React.Component
{
	constructor(props)
	{
		super(props)
		this.state = {nombres:[‘Julieta’,’Maria’,’Mariana’] }
	}

	cambio_estado()
	{
		this.setState({nombres:[‘Nombre 1’, ‘Nombre 2’, ‘Nombre 3’] })
	}

	render()
	{
		return( 
			<div> 
				<button onClick={this.cambiar_estado.bind(this)}>
					CAMBIAR ESTADO 
				</button>
			</div> 
		)
	}
}
export default ComponenteFuncional