0

estoy haciendo un pequeño crud con react de una lista de tareas, tengo un pequeño incoveniente y es que cuando le doy click al boton de actualizar mi intencion es que se abra una ventana modal con un formulario para poder cambiar el titulo de la tarea.

Imagen de la UI: introducir la descripción de la imagen aquí

El problema es que cuando realizo el evento de click y trato de mandar el valro por props, me trae la ultima de la lista porque esta en un ciclo, quisiera que alguien pudiera ayudarme a saber como puedo enviar el id de la tarea que quiero hacia el modal.

Codigo del componente:

import React, { useEffect, useState } from 'react';
import { ModalForm } from './ModalForm';

export const TaskList = ({deleteTask, tasks}) => {

    const [modal, setModal] = useState(false);

    const handleEdit = (id) => {
        const task = tasks.filter(t => t.id === id);
        //setModal(!modal);
    }

    const handleDelete = (id) => deleteTask(id);


    return (
        <div>

        <table className="table is-narrow">
            <thead>
                <tr>
                    <th>#</th>
                    <th>TITLE</th>
                    <th>STATUS</th>
                    <th colSpan="3">OPCIONES</th>
                </tr>
            </thead>
            <tbody>
                {
                    tasks.map((task, idx) => (
                        <tr key={idx}>
                            <td>{task.id}</td>
                            <td>{task.title}</td>
                            <td>{task.status === true ? "Completada" : "En Proceso"}</td>
                            <td>
                                <input type="checkbox"/>
                                <button className="button c-button is-danger" onClick={() => handleDelete(task.id)}>X</button>
                                <button className="button c-button is-warning" onClick={() => handleEdit(task.id)}>Edit</button>
                            </td>
                        </tr>
                    ))
                }
            </tbody>
        </table>
        </div>
    )
}

1 respuesta 1

0

Modal componente esto esta con TypeScript

import './modal.css';
import React, {  useRef } from 'react'
import ReactDOM from 'react-dom'
import * as CSS from 'csstype'




type ModalProps = {
  open:boolean
  children?:React.ReactNode
  bg?: CSS.Property.Color 
  onClick?: (e:React.MouseEvent<HTMLDivElement, MouseEvent>)=> void
 
}

const Modal = (props:ModalProps) =>{

    const scrollY = useRef(0)

    const bg = props.bg || 'rgba(0,0,0,0.25)' 
    const open = () =>{
        scrollY.current = window.scrollY
        const body = document.body;
        body.style.overflow = 'hidden'
        return (
            <div className='modal' style={{backgroundColor: bg}} onClick={props.onClick}>
                 {props.children}
             </div>
        )
    }
    const close = () =>{
        const body = document.body;
        body.style.overflow = ''
        if(scrollY.current > 0) window.scrollTo(0, scrollY.current);
        return null
    }


    return ( 
      props.open ?
      
      ReactDOM.createPortal(
           open()
       ,
       document.body)
      : close()

    );
    
}

export default Modal

CSS:

.modal{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
}

Cuando de click al modal al background cambias el props open a false para cerrarlo o en el children creas un onclick para cerrar el modal tu logica.

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.