1

Aun estoy aprendiendo React.js y me he encontrado con este problema. Necesito pasar propiedades desde el 'parent' a dos 'children', ya que es este el modo en que los 'siblings' se pueden comunicar entre ellos. He intentado usar el render para pasar las propiedades, pero parece no funcionar, ya que una vez llamo la función en uno de los 'children', esta no puede encontrar cart o cartCopy y resulta undefined.

Aquí se muestra el parent component el cual tiene cart, setCart, cartCopy y setCartCopy, los cuales necesito pasar a los 'children'.

function App() {
  const [cart, setCart] = useState([]);
  const [cartCopy, setCartCopy] = useState([])

  return (
    <div >
      <header className="App">
        <img className='logo' src={logo} alt='NB' />
        <Router>
          <Nav />
          <Route exact path="/" component={Home} />
          <Route exact path="/products" component={Products} render={(props) => <Products {...props} cart={cart} setCart={setCart} cartCopy={cartCopy} setCartCopy={setCartCopy} />} />
          <Route exact path="/cart" component={Cart} render={(props) => <Cart {...props} cart={cart} setCart={setCart} cartCopy={cartCopy} setCartCopy={setCartCopy} />} />
          <Route exact path="/signin" component={Signin} />
          <Route exact path="/register" component={Register} />
        </Router>
      </header>
</div>

  );
}

Aquí, uno de los child componentes, que necesita recibir del parent componente, para poder utilizar la información.

const Cart = ({ cart, setCart, cartCopy, setCartCopy }) => {

    const clearCartItem = (itemID) => {

        let cartCopy = [...cart]
        cartCopy = cartCopy.filter(item => item._id != itemID);

        setCart(cartCopy);
        let cartString = JSON.stringify(cartCopy)
        localStorage.setItem('cart', cartString)
        setCartCopy(cartCopy)
    }

Gracias,


I am still learning React and I was stuck with this issue. I need to pass props from parent to two children as this is the way the siblings can communicate with eachother.

I tried to use render to pass the props, but it does not work.

Here the parent component which has cart, setCart, cartCopy and setCartCopy, which is what I need to pass to the children.

function App() {
  const [cart, setCart] = useState([]);
  const [cartCopy, setCartCopy] = useState([])

  return (
    <div >
      <header className="App">
        <img className='logo' src={logo} alt='NB' />
        <Router>
          <Nav />
          <Route exact path="/" component={Home} />
          <Route exact path="/products" component={Products} render={(props) => <Products {...props} cart={cart} setCart={setCart} cartCopy={cartCopy} setCartCopy={setCartCopy} />} />
          <Route exact path="/cart" component={Cart} render={(props) => <Cart {...props} cart={cart} setCart={setCart} cartCopy={cartCopy} setCartCopy={setCartCopy} />} />
          <Route exact path="/signin" component={Signin} />
          <Route exact path="/register" component={Register} />
        </Router>
      </header>
</div>

  );
}

Here one child component, which needs to recieve from parent in order to use the data:

const Cart = ({ cart, setCart, cartCopy, setCartCopy }) => {

    const clearCartItem = (itemID) => {

        let cartCopy = [...cart]
        cartCopy = cartCopy.filter(item => item._id != itemID);

        setCart(cartCopy);
        let cartString = JSON.stringify(cartCopy)
        localStorage.setItem('cart', cartString)
        setCartCopy(cartCopy)
    }

Thank you!

2
  • 2
    Welcome to SO in Spanish, please translate your question or it will be closed el 21 feb. 2021 a las 14:19
  • Realice una modificación al primer ejemplo para poder emular el error que obtienes de tu lado, saludos
    – g.4
    el 22 feb. 2021 a las 1:29

1 respuesta 1

0

Puede que el origen del problema, este en la forma de configurar el componente Route, se están usando dos propiedades component y render al mismo tiempo.

Consideremos el siguiente ejemplo:

//const Router = window.ReactRouterDOM.BrowserRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;

function App(){
  const [cart, setCart] = React.useState([]);
  const [cartCopy, setCartCopy] = React.useState([]);
  
  return(
    <div>
    <ReactRouterDOM.HashRouter>
      <Link to="/cart">Ve a Cart</Link>
      <Route path="/cart" 
        component={Cart} //se pasa primero cart sin props custom
        render={(props) => 
            <Cart {...props} 
              cart={cart} 
              setCart={setCart}
              cartCopy={cartCopy}
              setCartCopy={setCartCopy} />} />
    </ReactRouterDOM.HashRouter>
    </div>
  );
}

const Cart = ({ cart, setCart, cartCopy, setCartCopy }) => {
  console.log("cart", cart);
  console.log("cartCopy", cartCopy);
  console.log("setCart", setCart);
  console.log("setCartCopy", setCartCopy);
return <h3>In cart</h3>
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
    


 

<div id="root"></div>

Al ejecutar el ejemplo, dando click a Ve a cart, los console.log del componente Cart mostrarán undefined.

Se observa que Route da prioridad a la propiedad component sobre la propiedad render, por lo que pasa Cart sin props personalizadas:

component={Cart} //aqui se pasa primero cart sin props custom

Por lo tanto el componente Cart no tiene capturas de ninguna prop personalizada como:

cart, setCart, cartCopy, setCartCopy

Entonces, para este caso usar las propiedades component y render al mismo tiempo no parece ser un patrón válido, pues Router da prioridad a component sobre render.

Solución

Cuando se necesitan pasar props personalizadas a un componente por medio de Route, el patrón que parece funcionar es usando la propiedad render:

//const Router = window.ReactRouterDOM.BrowserRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;

function App(){
  const [cart, setCart] = React.useState([]);
  const [cartCopy, setCartCopy] = React.useState([]);
  
  return(
    <div>
    <ReactRouterDOM.HashRouter>
      <Link to="/cart">Ve a Cart</Link>
      <Route path="/cart" 
        render={(props) => 
            <Cart {...props} 
              cart={cart} 
              setCart={setCart}
              cartCopy={cartCopy}
              setCartCopy={setCartCopy} />} />
    </ReactRouterDOM.HashRouter>
    </div>
  );
}

const Cart = ({ cart, setCart, cartCopy, setCartCopy }) => {
  console.log("cart", cart);
  console.log("cartCopy", cartCopy);
  console.log("setCart", setCart);
  console.log("setCartCopy", setCartCopy);
return <h3>In cart</h3>
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/[email protected]/babel.js'></script>
    


 

<div id="root"></div>

En el ejemplo anterior yá se configuró el componente Route solo con la propiedad render, ahí es donde se especifica que el componente Cart va a recibir props personalizadas; al entrar a la ruta /cart, ya se observan todas las props capturadas en el scope, dentro de los console.log.

Notas de campo

Esta validación puede ser problemática:

cartCopy.filter(item => item._id != itemID);

Yo usaría el operador !== (not equal value or not equal type):

cartCopy.filter(item => item._id !== itemID);

Espero que esta respuesta sea de ayuda.

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.