how to edit user data and pass values to form inside modal using reactjs?

Question

When clicking on the edit button of the table, I need to get the user's values and move to the form that is inside the modal. Then save/replace the data in the table. How to make? If anyone knows how to solve this problem please help me, I don't know how to do it!

App.js

import './App.css';
import Navbar from './components/Navbar';
import Home from './components/pages/Home/Home';
import ListarPacientesHome from './components/pages/ListarPacientes/ListarPacientes';
import Sobre from './components/pages/Sobre/Sobre';
import Cadastrar from './components/pages/Cadastrar/Cadastrar'
import React, { useState, useEffect } from 'react'

import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

const App = () => {
  const storage = JSON.parse(localStorage.getItem("pacientes")); // pega a string JSON e converte para objeto JavaScript
  const [pacientes, setPacientes] = useState(storage);
  // const [pacienteEdit, setPacienteEdit] = useState(false); // para editar paciente
  useEffect(() => {
    localStorage.setItem("pacientes", JSON.stringify(pacientes));//converting to string JSON

}, [pacientes]);

  return (
    
      
      
        }>
        
        }>
        
        }>
        
        }>
        
      
    
  );
}
export default App;

ModalEdit.js

import React, { useState } from "react";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
import Modal from "@mui/material/Modal";
import styled from "styled-components";

const NewBox = styled(Box)(({ theme }) => ({
    width: "50%",
    margin: "auto"
}));
const style = {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    bgcolor: "background.paper",
    border: "2px solid #000",
    boxShadow: 24,
    p: 4,
    position: "relative"
};

const buttonClose = {
    position: "absolute",
    right: "0",
    top: "0"
};

const ModalFormulario = () => {
    const [open, setOpen] = useState({
        show: false
    });
    const handleOpen = () => {
        setOpen({
            show: true
        });
    };
    const handleClose = () => {
        setOpen({
            show: false
        });
    };
    return (
        
            
            
                
                    
                        
                    
                    
                        Editar paciente
                    
                    
                        Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
                    
                
            
        
    );
}

export default ModalFormulario

Table code with users - ListUser.js

import React, { useState } from 'react'
import styled from 'styled-components'
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import TotalPacientes from '../../TotalPacientes/TotalPacientes';
import Alert from '@mui/material/Alert';
import { Container } from 'semantic-ui-react';

const Table = styled.table`
border-collapse: collapse;
td, th {
  border: 1px solid #bbb;
  text-align: center;
  padding: 1rem;
}
tr:nth-child(even) {
  background-color: #eee;
}
tr.status-paciente{
  text-decoration: line-through solid  #d60e0e;
  opacity: 0.5;
}
`
const Button = styled.button`
border: none;
cursor: pointer;
background-color: transparent;
`

const ListarPacientes = ({ pacientes, setPacientes }) => {
  const [searchInput, setSearchInput] = useState();
  const [remove, setRemove] = useState({
    success: false,
    menssageRemove: '',
  });
  const FilteredPatientsByName =
    !searchInput ? pacientes : pacientes.filter(paciente => paciente.nome.toLowerCase().includes(searchInput.toLowerCase()))

  const handleSearch = (event) => {
    setSearchInput(event.target.value);
  };
  const removePaciente = (idToDelete) => {
    const confirmarExclusao = window.confirm("Confirmar exclusão?");
    if (confirmarExclusao) {
      const newPatient = [...pacientes];
      newPatient.splice(idToDelete, 1);
      setPacientes(newPatient);
      setRemove({
        success: true,
        menssageRemove: 'Paciente removido',
      });
      setTimeout(() => setRemove({ success: false, menssageRemove: '' }), 3000);
    }
  };
  const handleDisablePatientClick = (paciente) => {
    setPacientes(
      pacientes.map((item) =>
        item.id === paciente.id ? { ...item, status: !item.status } : item
      )
    );
  }
  return (
    
      
        Listar Pacientes
        
          
        
        
            {pacientes.length > 0 ? (
              FilteredPatientsByName.map((paciente, index) => (
                
              ))
            ) : (
              Nenhum usuário para listar ou filtrar
            )}
          
          
            
              Nome
              Data de nascimento
              CPF
              Gênero
              Endereço
              Status
              Ações
            
          
          
                  {paciente.nome}
                  {paciente.dataDeNascimento}
                  {paciente.cpf}
                  {paciente.sexo}
                  {paciente.endereco}
                  
                  
                    
                      
                      
                    
                  
                
        
         paciente.status).length}>
        
        
          {remove.success === true ?
            Paciente removido
            : ''}
        
      
    
  )
}

export default ListarPacientes

Code Submit.js

import React, { useState, useEffect } from 'react'
import './Cadastrar.css'
import { Form } from 'semantic-ui-react'
import { Button } from '@material-ui/core';
import Container from '@material-ui/core/Container';
import Box from '@mui/material/Box';

const Cadastrar = ({ pacientes, setPacientes }) => {
    const [open, setOpen] = useState(true);
    const [pacienteInfo, setPacienteInfo] = useState({
        nome: "",
        dataDeNascimento: "",
        cpf: "",
        sexo: "",
        endereco: "",
    });
    const [disable, setDisable] = useState(false);
    const [mensage, setMensage] = useState({
        messageCpf: "",
        mensageSubmit: ''
    });
    const handleFieldChange = (event) => {
        const { name, value } = event.target;
        setPacienteInfo({
            ...pacienteInfo,
            [name]: value
        });
    }
    const onFormSubmit = (event) => {
        event.preventDefault();
        if (!pacienteInfo) return;
        setPacientes([...pacientes, {
            id: Date.now(),
            nome: pacienteInfo.nome.trim(),
            dataDeNascimento: pacienteInfo.dataDeNascimento,
            cpf: pacienteInfo.cpf,
            sexo: pacienteInfo.sexo,
            endereco: pacienteInfo.endereco.trim(),
            status: true
        }]);
        setPacienteInfo({ nome: '', dataDeNascimento: '', cpf: '', sexo: '', endereco: '' });
    };
    //Desabilita botao enviar se existir cpf duplicado
    useEffect(() => {
        setDisable(pacientes.some(item => item.cpf === pacienteInfo.cpf))
        const ifExistCpf = () => {
            const filterCpf = pacientes.some(item => item.cpf === pacienteInfo.cpf);
            if (filterCpf === true) {
                setMensage({
                    messageCpf: "Esse CPF já existe",
                });
            } else {
                setMensage({
                    messageCpf: '',
                });
            }
        }
        ifExistCpf();
    }, [pacientes, pacienteInfo]);
    return (
        
            
                Cadastrar paciente
            
            
                
                    Nome
                    
                
                
                    Data de Nascimento
                    
                
                
                    CPF
                    
                    {mensage.messageCpf}
                
                
                    Gênero
                    
                
                
                    Endereço
                    
                
                
                    
                    
                
            
        

    )
}
export default Cadastrar

Expected result

how to edit user data and pass values to form inside modal using reactjs?

0 Answers