1

Estoy tratando de enviarle una propiedad al componente Editproduct, pero cuando lo recibo allá con props.variable, no me aparece el valor de la variable, hago un console.log y me aparece undefined.

const Home = (props) =>{

const [buttonClicked, setButtonClicked] = useState(false);

function handleButtonClick(){
    setButtonClicked(true)
}

return(

<Button 
     onClick={() => handleButtonClick()}
     entry = {index}>
     <Edit color="primary" fontSize="small"/>
</Button>

   {buttonClicked ? <Redirect to="/editproduct"><Editproduct variable={true}/></Redirect> : null}
);}

El valor de la propiedad 'Variable' que es true, necesito recibirlo en el componente Editproduct. Al recibirlo, lo almaceno en un Hook en la función useEffect() y hago un console.log y me aparece undefined, no entiendo qué está sucediendo.

const Editproduct = (props) => {

   const [variable, setVariable] = useState('');

   useEffect(() => {
      setVariable(props.variable);
      console.log(variable);
   }, []);
}

¿Cómo hago para que me aparezca el valor de variable en el otro componente?

1
  • podrías mostrar que sale con console.log(props)? Commented el 24 dic. 2019 a las 19:08

4 respuestas 4

1

No sé mucho de React pero creo que necesitas usar this de la siguiente manera: this.props.variable. Espero haber sido de ayuda.

1
  • 3
    Esto estaría correcto si estuviera usando React con clases, pero esta usando hooks Commented el 24 dic. 2019 a las 23:39
0

No está mal lo que hiciste sino que dentro del useEffect no está cambiando el valor del estado, si lo hacés por fuera te debería mostrar ese valor.

const Editproduct = (props) => {

   const [variable, setVariable] = useState('');

   useEffect(() => {
      setVariable(props.variable);
   }, []);

   console.log(variable);
}

Para el caso este no hace falta que crees un estado de la misma variable, el componente va a renderizar por cada vez que cambie la propiedad, por la cual es innecesario que uses el hook de useState y useEffect.

0

no me queda muy claro porque no tienes definida la variable en el padre, que es el componente Home. Quieres cambiar el valor de la "variable" en el componente hijo, "EditProduct" y actualizar el padre ?

const Home = (props) =>{

const [buttonClicked, setButtonClicked] = useState(false);
const [variable, setVariable] = useState(false);
function handleButtonClick(){
    setButtonClicked(true)
}
function handleVariable(value){
    setVariable(value)
}

return(

<Button 
     onClick={() => handleButtonClick()}
     entry = {index}>
     <Edit color="primary" fontSize="small"/>
</Button>

   {buttonClicked && <Redirect to="/editproduct"><Editproduct handleVariable={handleVariable}/></Redirect>}



y en el hijo 

const Editproduct = (props) => {

 <button onClick={()=> props.handleVariable(true)} >Click to change component father state</button>
}

0

Si la única función que vas a hacer con el botón es redirigir a otro componente lo puedes hacer usando un Link así:

import { Link } from 'react-router-dom';

const Home = props => {
const [buttonClicked, setButtonClicked] = useState(false);

function handleButtonClick() {
  setButtonClicked(true);
}

return (
  <Button          
      component={Link}
      to={{
         pathname: '/editproduct',
         state: { Variable: true }
      }}
      entry={index}
   >
      <Edit color="primary" fontSize="small" />
   </Button>
 );
};

Y para recibir la prop en Editproduct usas el useLocation como en el siguiente codigo:

import { useLocation } from 'react-router-dom';

const Editproduct = () => {

   const [variable, setVariable] = useState('');

   useEffect(() => {
      setVariable(useLocation().state.variable);
      console.log(variable);
   }, []);
}

por si lo quieres hacer de la forma que lo tenías

import { Redirect } from 'react-router-dom';

const Home = props => {
   const [buttonClicked, setButtonClicked] = useState(false);

   function handleButtonClick() {
      setButtonClicked(true);
   }

   return (
      <div>
         <Button onClick={() => handleButtonClick()} entry={index}>
            <Edit color="primary" fontSize="small" />
         </Button>

         {buttonClicked ? (
            <Redirect
               to={{
                  pathname: '/editproduct',
                  state: { Variable: true }
               }}
            />

         ) : null}
      </div>
   );
};

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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