tengo que hacer esta actividad Para este primer reto de programación en React vamos a poner en practica lo aprendido hasta ahora para crear dos componentes.
Cada uno de estos componentes tendrá sus propias características.
Componente A: Este componente va a tener disponer un Contacto(crea una clase para ello), que va a contar con las siguientes características:
Nombre: que será un String.
Apellido: también un String.
Email: de nuevo un String.
Conectado: será un booleano que nos indicará si la persona está conectada o no.
Componente B: Por otro lado, tenemos el componente B que va a recibir por props un contacto y va a poder cambiar su estado de conectado a desconectado y viceversa.
Si el contacto está conectado, se debe mostrar: Contacto En Línea
Si el contacto no está conectado, se debe mostrar: Contacto No Disponible
Renderizado de componentes en la solución:
El Componente A debe ser renderizado dentro del componente App.js del proyecto.
El Componente B debe ser renderizado desde el componte A y recibir los props adecuadamente
Recordatorio: Haz uso de Proptypes adecuadamente
La cuestión es que el programa renderiza bien las vistas el problema esta en cuando quiero cambiar el estado del conectar que es un booleano, este se cambia pero renderiza el resultado en la vista, vale aclarar que en la herramienta React Developer Tools en la parte de components se muestran los cambios del booleano pero no en las vistas, si alguien me puede dar una mano con esto se lo agradecería.
import React from 'react';
const ContactoF = ({ contacto }) => {
return (
<div>
<h1>nombre: {contacto.nombre}</h1>
<h2>apellido: {contacto.apellido}</h2>
<h3>email: {contacto.email}</h3>
<h4>
conectado:{' '}
{contacto.state.conectado
? 'Contacto En Línea'
: 'Contacto No Disponible'}
</h4>
</div>
);
};
export default ContactoF;
import { Component } from 'react';
import ContactoF from './contactoF';
import { PropTypes } from 'prop-types';
class Contacto extends Component {
nombre;
apellido;
email;
constructor(nombre, apellido, email) {
super();
this.nombre = nombre;
this.apellido = apellido;
this.email = email;
this.state = {
conectado: true,
cont: 0,
};
this.conectar = this.conectar.bind(this);
this.desconectar = this.desconectar.bind(this);
}
conectar = () => {
this.setState((state) => {
return { conectado: (state.conectado = true) };
});
};
desconectar = () => {
this.setState((state) => {
return { conectado: (state.conectado = false) };
});
};
render() {
const contact = new Contacto('Leo', 'pepe', 'pepe@hotmail.com');
return (
<div>
<button onClick={this.conectar}>Conectar</button>
<button onClick={this.desconectar}>Desconectar</button>
<ContactoF
contacto={contact}
conectar={this.conectar}
desconectar={this.desconectar}
></ContactoF>
</div>
);
}
}
Contacto.propTypes = {
contacto: PropTypes.instanceOf(Contacto),
};
export default Contacto;