es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo pasar const dentro de useState en React

26 Jul, 2023 Programación

Tengo un código en el que necesito pasar una constante dentro de useState, ¿alguien puede ayudar?

El siguiente código está en el constructor de la clase, quiero convertirlo en un componente funcional.

Componente de clase:

constructor(props){
    super(props);
    const {id, name, email} = props.location.state.contact;
    this.state={
        id,
        name,
        email
    }
}

¿Cómo puedo hacer esto en un componente funcional?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para convertir el código de la clase componente anterior en un componente funcional, podemos utilizar el Hook useState de React. Así es como se vería el código actualizado:

    Componente Funcional:

    import React, { useState } from 'react';

const Contact = ({ location }) => {
  const { id, name, email } = location.state.contact;
  const [state, setState] = useState({
    id,
    name,
    email,
  });

  return (
    <div>
      {state.id}
      {state.name}
      {state.email}
    </div>
  );
};

export default Contact;

    En el código anterior, primero importamos React y el Hook useState. Luego, definimos nuestro componente funcional Contact que recibe props como entrada. Desestructuramos el objeto contact de la propiedad location.state y creamos un estado utilizando el Hook useState, que contiene los valores de id, nombre y correo electrónico del objeto contact.

    Finalmente, retornamos nuestro JSX, que muestra los valores de state utilizando las etiquetas p.

Comments are closed.