import React,{useState} from "react";
const Product=()=>{

const [obj,setObj]=useState({"id":444,"name":"prem","fee":50000.99});
const [products,setProducts]=useState(
[{"p_id":111,"p_name":"p_one","p_cost":10000,"company_name":"Lenovo"},
{"p_id":222,"p_name":"p_two","p_cost":20000,"company_name":"Dell"},
{"p_id":333,"p_name":"p_three","p_cost":30000,"company_name":"samsung"}]);
return(<>

<h1>{obj.id}</h1>
<h1>{obj.name}</h1>
<h1>{obj.fee}</h1>
<hr></hr>
<div>
<table border={1}
align="center"
cellPadding={10}
cellSpacing={10}>
<thead>
<tr>
<th>p_id</th>
<th>p_name</th>
<th>p_cost</th>
<th>company_name</th>
</tr>
</thead>
<tbody>
{
products.map((element,index)=>{
return(<tr key={index}>
<td>{element.p_id}</td>
<td>{element.p_name}</td>
<td>{element.p_cost}</td>
<td>{element.company_name}</td>
</tr>);
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>



</>)
}
export default Product;

import React,{useState} from "react";
const Product=()=>{

const [obj,setObj]=useState({"id":444,"name":"prem","fee":50000.99});
const [products,setProducts]=useState(
[{"p_id":111,"p_name":"p_one","p_cost":10000,"company_name":"Lenovo"},
{"p_id":222,"p_name":"p_two","p_cost":20000,"company_name":"Dell"},
{"p_id":333,"p_name":"p_three","p_cost":30000,"company_name":"samsung"}]);
return(<>

<h1>{obj.id}</h1>
<h1>{obj.name}</h1>
<h1>{obj.fee}</h1>
<hr></hr>
<div>
<table border={1}
align="center"
cellPadding={10}
cellSpacing={10}>
<thead>
<tr>
<th>p_id</th>
<th>p_name</th>
<th>p_cost</th>
<th>company_name</th>
</tr>
</thead>
<tbody>
{
products.map((element,index)=>{
return(<tr key={index}>
<td>{element.p_id}</td>
<td>{element.p_name}</td>
<td>{element.p_cost}</td>
<td>{element.company_name}</td>
</tr>);
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>



</>)
}
export default Product;

import React, { useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';

const validCredentials = {
username: 'user',
password: 'pass'
};

function Login() {
const usernameRef = useRef();
const passwordRef = useRef();
const [error, setError] = useState('');
const navigate = useNavigate();

const handleSubmit = (e) => {
e.preventDefault();

const username = usernameRef.current.value;
const password = passwordRef.current.value;

// Simple validation
if (username === validCredentials.username && password === validCredentials.password) {
navigate('/dashboard'); // Redirect to Dashboard
} else {
setError('Invalid credentials. Please try again.');
}
};

return (
<div>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input type="text" ref={usernameRef} />
</label>
</div>
<div>
<label>
Password:
<input type="password" ref={passwordRef} />
</label>
</div>
<button type="submit">Login</button>
{error && <p style={{ color: 'red' }}>{error}</p>}
</form>
</div>
);
}

export default Login;