0

Estoy haciendo mini aplicaciones para aprender y practicar React, y hay varias cosas que no entiendo. Una de esas son las props y otra es como pasar "info" o data de un componente a otro (si no me equivoco, eso es con props, pero me marea). Ahora lo que yo quiero hacer es tipo una todo list, pero no hay ningun input en la pagina principal, sino que el input está en un modal.

Primero tengo la pagina principal que sería esto:

import { useState } from 'react'
import Modal from './Modal'

const Header = () => {
  const [showModal, setShowModal] = useState(false)

  return (
    <>
      <div className='h-screen flex justify-center items-center font-poppins'>
        <div className='flex items-center justify-center flex-col'>
          <h1 className='font-medium text-3xl'>Supermarket list</h1>
          <h3 className='font-medium text-2xl my-6'>0 item(s)</h3>
          <button onClick={() => setShowModal(true)} className='bg-sky-500 text-white rounded-md py-3 px-40 md:px-56 hover:bg-sky-600'>
            Add item
          </button>
        </div>
        <Modal isVisible={showModal} onClose={() => setShowModal(false)} />
      </div>
    </>
  )
}

export default Header

Y al tocar el botón "Add item" se abre el modal, que tambien es muy basico no tiene nada complicado..

const Modal = ({ isVisible, onClose }) => {
  if (!isVisible) return null

  return (
    <div className='fixed inset-0 bg-gray-100 bg-opacity-80 flex justify-center items-center'>
      <div className='w-[400px]'>
        <div className='bg-white p-6 rounded-lg shadow-xl flex flex-col items-center'>
          <h1 className='font-semibold text-2xl mb-6'>Add item</h1>
          <input
            type='text'
            className='w-full py-2.5 px-3 rounded-sm border border-black focus:outline-blue-500'
          />
          <div className='flex flex-row mt-6 gap-6'>
            <button
              onClick={onClose}
              className='bg-gray-100 font-medium rounded-md px-16 py-3 mx-auto hover:bg-gray-200'
            >Close
            </button>
            <button className='text-white bg-sky-500 font-medium rounded-md px-16 py-3 mx-auto hover:bg-sky-600'>Add</button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Modal

Acá lo que me caga es que no sé como aplicar la lógica de un todo list a estos 2 componentes, porque yo quise hacer la lógica en un componente aparte y vengo con esto:

import React, { useState } from 'react'

const ItemsList = () => {
  const [items, setItems] = useState([])

  const addItem = item => {
    setItems(currentItems => [...currentItems, item])
  }

  return (
    <div>
      <ul>
        {/* Items */}
      </ul>
    </div>
  )
}

export default ItemsList

Pero me trabé y no sé como seguir, porque tengo que aplicar la lógica del input en el componente Modal si no me equivoco, y despues el renderizado de la lista tengo que mostrarlo en el Header; y a todo esto la lógica la tengo en un TERCER componente yyyy me re mareó esto, no entiendo como hacerlo.

1 respuesta 1

0

Recuerda que las props solo pasan de padres a hijos, no de hijos a padres o entre hermanos... dicho esto podes hacerlo de tal manera de tener como padre Header y sus 2 hijos serán Modal y ItemList, Header tendrá el useState con la lista y la función que la modifica, pasas esta función como prop a Modal ya que la gracia de este componente es agregar elementos a la lista (por lo tanto modificarla), y pasas la lista en si a ItemList para que la renderice, al tener el useState dentro del padre te aseguras de que sus hijos tengan acceso a la lista y a la funcion modificadora:

Header.jsx:

import { useState } from 'react'
import Modal from './Modal'
import ItemList from './List'

const Header = () => {
  const [showModal, setShowModal] = useState(false)
  const [list, setlist] = useState([])

  return (
    <>
      <div className='h-screen flex justify-center items-center font-poppins'>
        <div className='flex items-center justify-center flex-col'>
          <h1 className='font-medium text-3xl'>Supermarket list</h1>
          <h3 className='font-medium text-2xl my-6'>0 item(s)</h3>
          <button onClick={() => setShowModal(true)} className='bg-sky-500 text-white rounded-md py-3 px-40 md:px-56 hover:bg-sky-600'>
            Add item
          </button>
        </div>
        <Modal isVisible={showModal} onClose={() => setShowModal(false)} setlist={setlist} />
        <ItemList list={list}></ItemList>
      </div>
    </>
  )
}

export default Header

Modal.jsx:

import { useRef } from "react"

const Modal = ({ isVisible, onClose, setlist }) => {
  if (!isVisible) return null

  const item_input = useRef() // con useRef seleccionamos el input, es la forma habitual de seleccionar elementos del DOM en React

  const handleList = () => setlist(list => [...list, item_input.current.value])
    
  return (
    <div className='fixed inset-0 bg-gray-100 bg-opacity-80 flex justify-center items-center'>
      <div className='w-[400px]'>
        <div className='bg-white p-6 rounded-lg shadow-xl flex flex-col items-center'>
        <h1 className='font-semibold text-2xl mb-6'>Add item</h1>
          <form onSubmit={e => e.preventDefault()}>
            <input
              ref={item_input} // este sera el input al que apunte 'item_input'
              type='text'
              className='w-full py-2.5 px-3 rounded-sm border border-black focus:outline-blue-500'
              required
            />
            <div className='flex flex-row mt-6 gap-6'>
              <button
                onClick={onClose}
                className='bg-gray-100 font-medium rounded-md px-16 py-3 mx-auto hover:bg-gray-200'
              >Close
              </button>
              <button className='text-white bg-sky-500 font-medium rounded-md px-16 py-3 mx-auto hover:bg-sky-600'
                onClick={handleList}
                type="submit"
              >Add</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}

export default Modal

ItemList.jsx:

export default function ItemList({ list }){
  return (
    <div id="list">
      { 
        list.map((elem, i) => <div key={i}> {elem} </div>) 
      }
    </div>
  )
}

El resto de componentes solo tiene modificaciones menores, las cuales he comentado. El input y los botones los encerré en un elemento <Form> para que la propiedad 'required' de los inputs funcione y nos evite recibir valores vacíos. Después como ves el componente ItemList no tiene ningún estilo... no dudes en preguntar cualquier duda que tengas.

Tu Respuesta

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

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