Reto #3: modal back button

[juandc]

Hello!

Este reto es mucho más fácil de explicar que los anteriores. El modal de My Order tiene un ícono de ir hacia atrás que debería cerrar el modal, pero por ahora no hace nada.

El reto de este issue es que no solo le permitas a los usuarios cerrar el modal presionando el botón de carrito de compras, ahora también debe cerrarse al presionar el botón de ir hacia atrás dentro del modal.

Esta vez ya no necesitas CSS, sino trabajar la lógica y comunicación de tus componentes con JavaScript y React.js.

[davalder]

Hola, lo hice así:
en el archivo Header.jsx le pase por props al container MyOrder el estado de nuestro modal:
{toggleOrders && <MyOrder toggleOrders={toggleOrders} setToggleOrders={setToggleOrders} />}
y en el archivo MyOrder.jsx recibí el estado y lo ejecute con onClick en el elemento de la imagen:

onClick={() => setToggleOrders(!toggleOrders)}

[christian-olivers]

Buen día, mi solución fue la siguiente
en el componente Header compartí los valores de State por props quedando de la siguiente manera
{toggleOrders && }
en myOrder ha quedado de la siguiente manera
const MyOrder = ({setToggleOrder}, {toggleOrder} ) => {
...
return (

<img src={arrow} alt="arrow" onClick={() => setToggleOrder(toggleOrder)} />
...
...

[cubancodepath]

Enviamos esto por props en Header.jsx

{toggleMyOrder && <MyOrder setToggle={setToggleMyOrder} />}
la recibimos en MyOrder y luego podems crear un handle para manejar este evento

const handleClose = () => setToggle(false);

<img src={littleArrow} alt="arrow" onClick={handleClose} />

[julianf-dev]

Se le pasa un eveno a la imagén de flecha.
Y usando un reducer se maneja el estado de setToogleOrder(!toggleOrders)

<img src='' alt="arrow" onClick={toggleOrder} />

[lvargascol]

Lo hice agregandolo al hook useInitialState.js de esta forma:

const setToggleOrders = () => { setState({ ... state, toggleOrders: !state.toggleOrders, }); }
Quedó de esta forma en Header.jsx:
const handleToggleOrders = () => { setToggleOrders(); };
<li className="navbar-shopping-cart" onClick={() => handleToggleOrders()}> <img src={shoppingCartIcon} alt="shopping cart" /> {state.cart.length > 0 ? <div>{state.cart.length}</div> : null} </li>
{state.toggleOrders && <ShoppingCart/>}

Y en MyOrder.jsx:

<div onClick={() => handleToggleOrders()}> <img src={arrowIcon} alt="arrow"/> </div>

[IsaiasZc]

Mi solucion aprovecha el initialState que habiamos creado, le añadimos una propiedad más:

const initialState = {
  cart: [],
  toggleOrders: false, // Añadimos el toggle Order

};

Luego al useInitialState le añadimos una función para cambiar el toggle:

  const changeToggle = () => {
    setState({
      ...state,
      toggleOrders: !state.toggleOrders
  })};

Con esto ya podemos usar el contexto dentro de Header.jsx y MyOrder.jsx al hacer click al carrito y la flecha de retroceder 😁

[martinmarcoff]

Comparto mi solución:

Incorporé la clase '.inactive' en MyOrder.scss

.inactive {
display: none
}

En el file MyOrder.jsx creé un event handler que añade la clase '.inactive' al elemento que tiene el classname 'MyOder'. De esta manera, el cuadro con la orden ya no se despliega.

const handleClick = () => {
const divClass = document.querySelector('.MyOrder')
console.log(divClass);
divClass.classList.add('inactive')
}

Al click handler lo añadí en el elemento que contiene el ícono:

<img onClick={handleClick} ..../>

[jdchavarro]

Pense en pasar tanto la propiedad toggleOrders y el metodo setToggleOrders como props a MyOrder.jsx pero mejor por practicar react context lo hice asi:

// useInitialState.js
...
const initialState = {
    cart: [],
    toggleOrders: false,
}
...
const setToggleOrders = (payload) => {
      setState({
          ...state,
          toggleOrders: payload
      });
}
...

// Header.jsx
const { state, setToggleOrders } = useContext(AppContext);

const handleToggleOrders = () => {
  // Esto lo puse para que me cerrara el otro menu
  setToggle(false);
  setToggleOrders(!state.toggleOrders);
};

{state.toggleOrders && <MyOrder />}

//MyOrder.jsx
const { state, setToggleOrders } = useContext(AppContext);

<img src={flechita} alt="arrow" onClick={() => setToggleOrders(false)}/>