I have to do this activity For this first React programming challenge we are going to put into practice what we have learned so far to create two components.
Each of these components will have its own characteristics.
Component A: This component will have a Contact (create a class for it), which will have the following characteristics:
Name: which will be a String.
Surname: also a String.
Email: again a String.
Connected: it will be a boolean that will indicate if the person is connected or not.
Component B: On the other hand, we have component B that will receive a contact by props and will be able to change its status from connected to disconnected and vice versa.
If the contact is online, it should display: Contact Online
If the contact is not connected, it should display: Contact Not Available
Component rendering in the solution:
Component A should be rendered within the project's App.js component.
Component B must be rendered from component A and receive props properly
Reminder: Use Proptypes Properly
The issue is that the program renders the views well, the problem is when I want to change the state of the connect, which is a boolean, this is changed but it renders the result in the view, it is worth clarifying that in the React Developer Tools tool in the part of components the boolean changes are shown but not in the views, if someone can give me a hand with this I would appreciate it.
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', '[email protected]');
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;