0

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;
1
  • muchas gracias bro, estoy recien empezando con react y viendolo de open boot camp es mas o menos asi como lo hacen pero supongo que son cosas permisivas al ser el inicio el 20 oct. 2022 a las 23:55

2 respuestas 2

0

Tu problema es que no les estás pasando el conectado como props a ContactoF.

Estás intentando esto.

<h4>
    conectado: { contacto.state.conectado ? "Contacto En Línea" : "Contacto No Disponible"}
</h4>

Pero en las proas le estás pasando esto.

<ContactoF
    contacto={contact}
    conectar={this.conectar}
    desconectar={this.desconectar}
></ContactoF>

y contact es const contact = new Contacto("Leo", "pepe", "pepe@hotmail.com"); por lo que el state de ese elemento no es el mismo del state que estás cambiando, es decir tienes un objeto A del tipo Contacto Ahí estás mandando a llamar un Objeto B del tipo ContactoF al cuál le estás pasando como propiedad un Objeto C del tipo Contacto. Observa que a pesar de ser del mismo tipo, el Objeto A y el Objeto C No son los mismos, por lo que al hacer clic en el botón, estás cambiando el state del objeto A no del Objeto C que es el que pasas.

Para solucionarlo, simplemente. pasa ese boolean a través de los pros y luego úsalo en el ContactoF

<ContactoF contacto={contact} conectado={this.state.conectado}/>

Y luego en tu clase contactoF

const ContactoF = ({contacto, conectado}) => {

    return (
        <div>
           ... //El resto de tu código
            <h4>
                conectado: {conectado ? "Contacto En Línea" : "Contacto No Disponible"}
            </h4>
        </div>
    );
};

NOTA

No es muy conveniente crear una clase que estás usando como componente para pasarla a través de los pros y obtener los datos, para eso sirve el state, o mejor aún ya que no cambia y puedes pasarla como props a través de los componentes, esto te da un mejor uso de reusabilidad que es al final de lo que trata react

Así quedaría lo mismo pero un mejor uso de los state y los props.

import React, {Component} from 'react';

const ContactoF = ({nombre, apellido, email, conectado}) => (
  <div>
    <h1> nombre: { nombre } </h1>
    <h2> apellido: { apellido } </h2>
    <h3> email: { email } </h3>
    <h4> conectado: { conectado ? "Contacto En Línea" : "Contacto No Disponible"} </h4>
  </div>
);

class Contacto extends Component {

  constructor({nombre, apellido, email}) {
    super();
    this.state = { conectado: true };
    this.conectar = this.conectar.bind(this);
    this.desconectar = this.desconectar.bind(this);
  }

  conectar = () => {
    this.setState((state) => {
      return {...state, conectado: true}
    });
  }

  desconectar = () => {
    this.setState((state) => {
      return {...state, conectado: false}
    });
  }
  
  render() {
    return (
      <div>
        <button onClick={this.conectar}>Conectar</button>
        <button onClick={this.desconectar}>Desconectar</button>
        <ContactoF
          {...this.props}
          conectado= {this.state.conectado}
        />
      </div>
    );
  }
}

export default function App() {
  return (
    <Contacto
      nombre="Pedro"
      apellido="Perez"
      email="pedro@perez.com"
    />
  );
}

Ya de aquí tú solo tendrías que separarlo en archivos y ponerle los PropTypes

1
  • muchas gracias bro por la ayuda y la explicacion el 21 oct. 2022 a las 0:07
0

Tienes un enfoque algo confuso en cuanto a la creación de componentes y de instanciación de clases.

Yo lo dividi de la siguiente manera:

  • Clase Contacto para crear nuevos contactos.
class Contacto {
  nombre;
  apellido;
  email;

  constructor(nombre, apellido, email) {
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
  }
}

export default Contacto;
  • Component de Contacto en el cual almacenas el estado de dicho contacto y controlas los eventos como conectar o desconectar
import React, { Component } from 'react';
import ContactoF from './contactoF';
import Contact from './Contact';
import { PropTypes } from 'prop-types';

class ContactoComponent extends Component {
  constructor(props) {
    super(props);
    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 = () => {
    console.log(this.state);
    this.setState({ ...this.state, conectado: false });
  };

  render() {
    const { contact } = this.props;
    const { conectado } = this.state;
    console.log(contact);
    return (
      <div>
        <button onClick={this.conectar}>Conectar</button>
        <button onClick={this.desconectar}>Desconectar</button>
        <ContactoF contacto={contact} conectado={conectado}></ContactoF>
      </div>
    );
  }
}

ContactoComponent.propTypes = {
  contacto: PropTypes.instanceOf(Contact),
};

export default ContactoComponent;
  • Componente que muestra la información del contacto
import React from 'react';

const ContactoF = ({ contacto, conectado }) => {
  return (
    <div>
      <h1>nombre: {contacto.nombre}</h1>
      <h2>apellido: {contacto.apellido}</h2>
      <h3>email: {contacto.email}</h3>
      <h4>
        conectado: {conectado ? 'Contacto En Línea' : 'Contacto No Disponible'}
      </h4>
    </div>
  );
};

export default ContactoF;

  • Y por ultimo un pequeno ejemplo utilizando los componentes arriba mencionados
import React from 'react';
import ContactoComponent from './ContactoComponent';
import Contact from './Contact';
import './style.css';

export default function App() {
  const contact = new Contact('Alex', 'Perez', 'aperez@gmail.com');
  const contact1 = new Contact('Ramon', 'Aguilar', 'raguilar@gmail.com');
  const contact2 = new Contact('Rosa', 'Meltros...', 'rosa@meltro.so');

  return (
    <div>
      <ContactoComponent contact={contact} />
      <ContactoComponent contact={contact1} />
      <ContactoComponent contact={contact2} />
    </div>
  );
}

Aca una pequeña muestra de como funciona:

https://react-mj4wec.stackblitz.io/

Espero sea de tu ayuda, Saludos!

3
  • No tiene sentido manejar clases para generar un objeto cuando realmente incluso haciendo {nombre: 'Alex', apellido: 'Perez'...} crea un objeto como tal. Además de limitar el poder cambiar dichas variables a través de algún state. Cuál sería la ventaja de ello o para qué hacerlo?
    – Sr1871
    el 20 oct. 2022 a las 7:02
  • Es valido tu comentario en referencia la necesidad de crear una clase para crear dichos objetos y en efecto lo puede hacer como indicas; pero la respuesta fue dada en base al enfoque que posee su código (crear clases e instancias de objtos) no a lo que yo quiero que el haga.
    – GmrYael
    el 20 oct. 2022 a las 14:44
  • Si te tomaste la molestia de separar el código, no veo porque no dar el valor agregado y explicar el porqué no es bueno hacerlo como le hace, al final es parte de una respuesta completa, pues no solo ayuda a solucionar su problema, sino a que entienda el porqué de las cosas.
    – Sr1871
    el 20 oct. 2022 a las 16:43

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.