I am having error with the Login.js code these are the error shown I am also having problem with the navigation in header please help me out this is a CRUD operation website.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at login.js:36.
at Login (http://localhost:3000/static/js/bundle.js:482:75)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:42128:5)
at Routes (http://localhost:3000/static/js/bundle.js:42571:5)
at Router (http://localhost:3000/static/js/bundle.js:42509:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:40827:5)
at div
at div
at App
I am also having problem with the navigation in header please help me out this is a CRUD operation website.
App.js
import './App.css';
import Create from './components/create';
import Read from './components/read';
import Update from './components/update';
import Login from './components/login';
import { Routes, Route } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
// import { useNavigate } from 'react-router-dom';
// import { Link } from 'react-router-dom';
// import Header from './components/header';
function App() {
// let Navigate = useNavigate();
return (
<div>
<header>
<h1 class='header1'>Aman Enterprises</h1>
<nav class ='nav'>
<ul>
{/* <li><Link to = '/login'>Login</Link></li> */}
{/* <li><Link to = '/create'>Registration</Link></li> */}
</ul>
</nav>
</header>
<div className="main">
<BrowserRouter>
<Routes>
<Route path="/" element={<Create />} />
<Route path="login" element={<Login />} />
<Route path="read" element={<Read />} />
<Route path="update" element={<Update />} />
</Routes>
</BrowserRouter>
</div>
</div>
);
}
export default App;
Login.js
import React, { useState } from 'react'
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios'
import { useNavigate } from 'react-router'
export default function Login() {
let navigate = useNavigate()
const[username, setusername] = useState('');
const[Employee_password, setEmployee_password] = useState('');
const GetData = (e) =>{
e.preventDefault();
console.log(username, Employee_password)
if(username !== username && Employee_password !== Employee_password)
{
alert('Username or Password does not match!')
return false
}
axios.post('http://localhost:5000/emp/login',{
username,
Employee_password
}).then((res)=>{
console.log('Login Successfull')
navigate('/read')
}).catch(err=>{
console.log(err)
})
}
return(
<div>
<Form onCLick={GetData}>
<h2>Login into existing ID</h2>
<Form.field>
<label>Enter Username</label>
<input type='text' placeholder='Username' onChange={(e) => setusername(e.target.value)}></input>
</Form.field>
<Form.field>
<label>Passworld</label>
<input type='password' placeholder='Password' onChange={(e) => setEmployee_password(e.target.value)}></input>
</Form.field>
{/* {<error && <div style={{ color: 'red' }}>Error</div>>} */}
<Button type='submit'>Login</Button>
</Form>
</div>
)
}
create.js
import React, { useState } from 'react';
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useNavigate } from 'react-router';
export default function Create() {
let navigate = useNavigate();
const [Employee_name, setEmployee_name] = useState('');
const [Employee_id, setEmployee_id] = useState('');
const [Employee_address, setEmployee_address] = useState('');
const [Employee_post, setEmployee_post] = useState('');
const [username, setusername] = useState('');
const [Employee_password, setEmployee_password] = useState('');
const postData = (e) => {
e.preventDefault();
if(Employee_name, Employee_id, Employee_address, Employee_post, username, Employee_password.length === 0)
{
alert('Enter Employee Details to register!')
return false
}
if(Employee_name.length === 0)
{
alert('Enter Employee Name!')
return false
}
if(Employee_id.length === 0)
{
alert('Enter Employee id!')
return false
}
if(Employee_address.length === 0)
{
alert('Enter Employee address!')
return false
}
if(Employee_post.length === 0)
{
alert('Enter Employee Position!')
return false
}
if(username.length === 0)
{
alert('Set Employee Username!')
return false
}
if(Employee_password.length === 0)
{
alert('Set Employee Password!')
return false
}
axios.post(`http://localhost:5000/qo`, {
Employee_name,
Employee_id,
Employee_address,
Employee_post,
username,
Employee_password
})
.then(() => {
navigate('/Login')
})
alert('Data Saved')
}
return (
<div>
<Form className="create-form" onSubmit={e =>postData(e)}>
<h2 class='Header'>Employee Registration form</h2>
<Form.Field required={true}>
<label>Employee Name</label>
<input type='text' placeholder='Employee Name' onChange={(e) => setEmployee_name(e.target.value)}/>
</Form.Field>
<Form.Field required={true}>
<label>Employee ID</label>
<input type='text' placeholder='Employee ID' onChange={(e) => setEmployee_id(e.target.value)}/>
</Form.Field>
<Form.Field required={true}>
<label>Employee Address</label>
<input type='text' placeholder='Employee Address' onChange={(e) => setEmployee_address(e.target.value)}/>
</Form.Field>
<Form.Field required={true}>
<label>Employee Position</label>
<input type='text' placeholder='Employee Position' onChange={(e) => setEmployee_post(e.target.value)}/>
</Form.Field>
<Form.Field required={true}>
<label>Create Username</label>
<input type='text' placeholder='Username' onChange={(e) => setusername(e.target.value)}/>
</Form.Field>
<Form.Field required={true}>
<label>Create Password</label>
<input type='password' placeholder='Password' onChange={(e) => setEmployee_password(e.target.value)}/>
</Form.Field>
<Button class='b2' onClick={postData} type='submit'>Submit</Button>
</Form>
</div>
)
}
read.js(panel for database display having update and delete functionality)
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Table, Button } from 'semantic-ui-react';
import { useNavigate } from 'react-router-dom';
export default function Read() {
let navigate = useNavigate();
const [APIData, setAPIData] = useState([]);
useEffect(() => {
axios.get(`http://localhost:5000/emp`)
.then((response) => {
console.log(response.data)
setAPIData(response.data);
})
}, []);
const setData = (data) => {
let { Employee_name, Employee_id, Employee_address, Employee_post, username, Employee_password } = data;
localStorage.setItem('Employee ID', Employee_id);
navigate('/update')}
const getData = () => {
axios.get(`http://localhost:5000/emp`)
.then((getData) => {
setAPIData(getData.data);
})
}
const onDelete = (data) => {
const{Employee_id}=data
if(Employee_id===0){
alert("Employee id not found")
return
}
const url=`http://localhost:5000/emp/${Employee_id}`
axios.delete(url)
.then((res) => {
getData();
})
.catch(err=>console.log(err))
alert('Employee Deleted!')
}
const Data = () => {
navigate('/')
}
return (
<form>
<h2>Registered Employees</h2>
<div>
<Table singleLine>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Employee Name</Table.HeaderCell>
<Table.HeaderCell>Employee ID</Table.HeaderCell>
<Table.HeaderCell>Employee Address</Table.HeaderCell>
<Table.HeaderCell>Employee Position</Table.HeaderCell>
<Table.HeaderCell>Employee Username</Table.HeaderCell>
<Table.HeaderCell>Employee Password</Table.HeaderCell>
<Table.HeaderCell>Update</Table.HeaderCell>
<Table.HeaderCell>Delete</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{APIData.map((data,index) => {
return (
<Table.Row key={index ""}>
<Table.Cell>{data.Employee_name}</Table.Cell>
<Table.Cell>{data.Employee_id}</Table.Cell>
<Table.Cell>{data.Employee_address}</Table.Cell>
<Table.Cell>{data.Employee_post}</Table.Cell>
<Table.Cell>{data.username}</Table.Cell>
<Table.Cell>{data.Employee_password}</Table.Cell>
{/* <Link to='/update'> */}
<Table.Cell>
<Button onClick={() => setData(data)}>Update</Button>
</Table.Cell>
{/* </Link> */}
<Table.Cell>
<Button onClick={() => onDelete(data)}>Delete</Button>
</Table.Cell>
</Table.Row>
)
})}
</Table.Body>
</Table>
<Button onClick={Data} type='submit'>Home</Button>
</div>
</form>
)
}
update.js
import React, { useState, useEffect } from 'react';
import { Button, Form } from 'semantic-ui-react'
import axios from 'axios';
import { useNavigate } from 'react-router-dom';
export default function Update() {
let navigate = useNavigate();
const [Employee_name, setEmployee_name] = useState('');
const [Employee_id, setEmployee_id] = useState('');
const [Employee_address, setEmployee_address] = useState('');
const [Employee_post, setEmployee_post] = useState('');
const [username, setusername] = useState('');
const[Employee_password, setEmployee_password] = useState('');
useEffect(() => {
setEmployee_id(localStorage.getItem('Employee ID'));
const id=localStorage.getItem('Employee ID')
getEmplyeeDetailsById(id)
}, []);
const getEmplyeeDetailsById=(id)=>{
const url=`http://localhost:5000/emp/${id}`
axios.get(url)
.then((res) =>{
if(res && res.data){
console.log(res.data[0])
let { Employee_name, Employee_id, Employee_address, Employee_post, username, Employee_password } =res.data[0];
setEmployee_name(Employee_name)
setEmployee_id(Employee_id)
setEmployee_address(Employee_address)
setEmployee_post(Employee_post)
setusername(username)
setEmployee_password(Employee_password)
}
// setAPIData(update.data);
})
.catch(err=>console.log(err))
}
const updateAPIData = () =>{
let jsonData={
Employee_name,
Employee_id,
Employee_address,
Employee_post,
username,
Employee_password
}
axios.put(`http://localhost:5000/emp/update`, jsonData)
.then(() => {
navigate('/read')
})
}
const back = () => {
navigate('/read')
}
return (
<div>
<Form className="create-form">
<h2>Update the Registered Data</h2>
<Form.Field>
<label>Employee Name</label>
<input placeholder='Employee Name' value={Employee_name} onChange={(e) =>setEmployee_name(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Employee ID</label>
<input placeholder='Employee ID' value={Employee_id ""} onChange={(e) => setEmployee_id(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Employee Address</label>
<input placeholder='Employee Address' value={Employee_address} onChange={(e) => setEmployee_address(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Employee Position</label>
<input placeholder='Employee Position' value={Employee_post} onChange={(e) => setEmployee_post(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Username</label>
<input placeholder='username' value={username} onChange={(e) => setusername(e.target.value)}/>
</Form.Field>
<Form.Field>
<label>Password</label>
<input type='password' placeholder='Password' onChange={(e) => setEmployee_password(e.target.value)}/>
</Form.Field>
<Button type='submit' onClick={updateAPIData}>Update</Button>
<Button onClick={back} type='submit'>Back</Button>
</Form>
</div>
)
}
CodePudding user response：
Replace Form.field with Form.Field in your Login.js
CodePudding user response：
In App.js You have to use '/' before every pathname. For example: path="/login".
In Login.js. Use useEffect hook for execute function. Example: useEffect(()=>{GetData () },[])
I hope it will useful for you