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.