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;
Your problem is that you're not passing them the
conectado
as props toContactoF
.You are trying this.
But in the bows you are happening this.
and that
contact
isconst contact = new Contacto("Leo", "pepe", "[email protected]");
why the onestate
of that element is not the same as thestate
one you are changing, that is, you have an object A of the type Contact There you are calling an Object B of the type ContactF to which you are passing as a property an Object C of the type Contact . Notice that despite being of the same type, Object A and Object C are NOT the same, so when you click the button, you are changing the onestate
of Object A not Object C which is the one you pass.Simply to fix it. pass that
boolean
one through the pros then use it on theContactoF
And then in your class
contactoF
NOTE
It's not very convenient to create a class that you're using as a component to pass it through the pros and get the data, that's what the is for
state
, or even better since it doesn't change and you can pass it asprops
through the components, this gives you a best use ofreusabilidad
that is at the end what it's aboutreact
So it would be the same but a better use of the
state
and theprops
.From here you would only have to separate it into files and put the
PropTypes
You have a somewhat confusing approach to component creation and class instantiation.
I split it like this:
Here is a small sample of how it works:
https://react-mj4wec.stackblitz.io/
I hope it will be of your help, Greetings!