update the view in a funcional component reactjs - reactjs

Question

I have two components contact_list.jsx and contact.jsx and a model contact.class and I can not update the view of props conected.
contact_list.
const ContactListComponent = ({contact }) => {
const defaultContact = new Contact('pepe', 'perez','perez#perez.com',
);
/**
*
*
*/
const [conected, setconected] = useState(false);
const changeState = (changeState) =>
{
console.log(conected);
setconected(conected ===false);
}
useEffect( () => {
console.log('se ejecuta');
},[conected]);
return (
<div>
<div>
your Contacts:
</div>
<ContactComponent conected={conected} contact={defaultContact} changeState={changeState}></ContactComponent>
<div>
<button onClick={changeState}>
cambiar estado conectado
</button>
</div>
</div>
)
}
export default ContactListComponent;
contact.jsx
const ContactComponent = ({contact}) => {
return (
<div>
<h2>
nombre: { contact.name }
</h2>
<h3>
descripción: { contact.surname }
</h3>
<h4>
level: { contact.email }
</h4>
<h5>
this state is: {contact.conected ? 'disponible': 'no disponible'}
</h5>
</div>
);
}
ContactComponent.propTypes = {
contact: PropTypes.instanceOf(Contact),
}
contact.class
export class Contact {
name = '';
surname = '';
email = '';
conected = false;
// level = LEVELS.NORMAL;
constructor(name, surname, email, conected) {
this.name = name;
this.surname = surname;
this.email = email;
this.conected = conected;
}
}
export default ContactComponent;
app.js
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
{/* <TaskListComponent></TaskListComponent> */}
<ContactListComponent></ContactListComponent>
</header>
</div>
);
}
export default App;
I dont know how to update with the button contact.conected from 'disponible' to 'no disponible'. in contact_list.jsx I have the hooks useState and useEffect I can change the conected props from true to false but I can not update the view.

Answer 1

I noticed some problems in your code.
You are initializing a "connected" state within the contact list component.
Although you are passing that state to the contact component by props, you are never using it inside it, always referencing contact.connected.
The use of the useEffect is not necessary at all.
I tried to replicate your functionality, in a cleaner way, but with the expected behavior:
import React, { useState } from "react";
const Contact = ({ contact }) => (
<div>
<h2>Nombre: {contact.name}</h2>
<h3>Apellido: {contact.surname}</h3>
<h4>Email: {contact.email}</h4>
<h5>Status: {contact.connected ? "Disponible" : "No disponible"}</h5>
</div>
);
const ContactsList = () => {
const [contacts, setContacts] = useState([{
name: 'Pepe',
surname: 'Pérez',
email: 'pepe#perez.com',
connected: false
}]);
const handleConnectedToggle = (index) => {
setContacts(prevState => {
const newContacts = [...prevState];
newContacts[index] = {
...prevState[index],
connected: !prevState[index].connected
};
return newContacts;
});
}
return (
<div>
{contacts.map((contact, index) => (
<div key={index}>
<Contact contact={contact} />
<button onClick={() => handleConnectedToggle(index)}>
Cambiar estado
</button>
</div>
))}
</div>
);
};
export default function App() {
return (
<div className="App">
<ContactsList />
</div>
);
}