CRUD FUNCIONAL

App.jsx

import "bootstrap/dist/css/bootstrap.min.css";
import "font-awesome/css/font-awesome.min.css";
import "./App.css";
import React from "react";
import { BrowserRouter } from "react-router-dom";

import Logo from "../components/templates/Logo";
import Nav from "../components/templates/Nav";
import Home from "../components/home/Home";
import Footer from "../components/templates/Footer";
import Main from "../components/templates/Main";
import Routes from "./Routes";

export default (props) => (
  <BrowserRouter>
    <div className="app">
      <Logo />
      <Nav />

      <Main>
        <Routes />
      </Main>

      <Footer />
    </div>
  </BrowserRouter>
);



FormUser.jsx

import React, { Fragment, useState } from "react";
import handleUserNameChange from "./HandleUser";
import handleUserEmailChange from "./HandleEmail";

export default function FormUser() {
  const [user, setUser] = useState();
  const [email, setEmail] = useState();

  return (
    <>
      <handleUserNameChange />

      <handleUserEmailChange />
    </>
  );
}


HandleEmail.jsx
import React from "react";

export default function handleUserEmailChange(props) {
  return (
    <div className="col-12 col-md-6">
      <div className="form-group">
        <label>E-mail</label>
        <input
          type="text"
          className="form-control"
          name="email"
          //value={props.email}
          //onChange={(e) => props.setEmail(e.target.value)}
          placeholder="Digite o e-mail..."
        />
      </div>
    </div>
  );
}


HandleUser.jsx

import React from "react";

export default function handleUserNameChange(props) {
  return (
    <div className="form">
      <div className="row">
        <div className="col-12 col-md-6">
          <div className="form-group">
            <label>Nome</label>
            <input
              type="text"
              className="form-control"
              name="name"
              // value={props.user}
              // onChange={(e) => props.setUser(e.target.value)}
              placeholder="Digite o nome..."
            />
          </div>
        </div>
      </div>
    </div>
  );
}

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

import Home from "../components/home/Home";
import UserCrud from "../components/user/UserCrud";
import FormUser from "../components/user/FormUser";

export default (props) => {
  return (
    <Routes>
      <Route exact path="/" element={<Home />} />
      <Route exact path="/users" element={<UserCrud />} />
      <Route exact path="/newuser" element={<FormUser />} />

      <Route path="*" element={<Home />} />
    </Routes>
  );
};