<html>
<head>
<meta charset="UTF-8" />
<title>Load Existing Database Record to React.js Form</title>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
<script src="https://unpkg.com/axios@0.24.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container"></div>
<script type="text/babel">
const { useState, useEffect } = React;
function UserItem({ user, onEdit }) {
return (
<div className="user-item">
<p className="user-name">Name: {user.name}</p>
<p className="user-email">Email: {user.email}</p>
<button className="edit-button" onClick={() => onEdit(user)}>Edit</button>
</div>
);
}
function EditModal({ isOpen, user, onClose, onSave }) {
const [formData, setFormData] = useState({}); // Reset the form data when the user prop changes
useEffect(() => {
setFormData({ ...user }); // Update form data when the user prop changes
}, [user]);
const handleChange = (e) => {
setFormData({
...formData,
[e.target.id]: e.target.value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
onSave(formData);
};
return isOpen ? (
<div className="modal">
<div className="modal-content">
<h2>Edit User</h2>
<form onSubmit={handleSubmit}>
<label htmlFor="name">Name</label>
<input
type="text"
id="name"
value={formData.name || ''}
onChange={handleChange}
className="input-field"
/>
<label htmlFor="email">Email</label>
<input
type="email"
id="email"
value={formData.email || ''}
onChange={handleChange}
className="input-field"
/>
{/* Add other form fields here */}
<div className="button-container">
<button type="submit" className="save-button">
Save
</button>
<button onClick={onClose} className="close-button">
Close
</button>
</div>
</form>
</div>
</div>
) : null;
}
function App() {
const [users, setUsers] = useState([]);
const [editModalOpen, setEditModalOpen] = useState(false);
const [selectedUser, setSelectedUser] = useState(null);
useEffect(() => {
const fetchDatabaseRecord = async () => {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
setUsers(response.data);
} catch (error) {
console.error('Error fetching database record:', error);
}
};
fetchDatabaseRecord();
}, []);
const handleEditClick = (user) => {
setSelectedUser(user);
setEditModalOpen(true);
};
const handleCloseModal = () => {
setEditModalOpen(false);
};
const handleSaveUser = (updatedUser) => {
// Perform form submission or API call to save the updated user details
// Here, you can use the `updatedUser` object to send the updated data to the server
console.log(updatedUser);
setEditModalOpen(false);
};
return (
<div className="app-container">
<h3>React Js Show/load Data in Edit Form in reactJS</h3>
<div>
{users.map((user) => (
<UserItem key={user.id} user={user} onEdit={handleEditClick} />
))}
</div>
{selectedUser && (
<EditModal
key={selectedUser.id} // Add a unique key to the modal
isOpen={editModalOpen}
user={selectedUser}
onClose={handleCloseModal}
onSave={handleSaveUser}
/>
)}
</div>
);
}
ReactDOM.render(<App />, document.getElementById('app'));
</script>
<style>
/* Styles for the container and button */
.app-container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.app-container button {
margin-top: 10px;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.app-container button:hover {
background-color: #0056b3;
}
/* Styles for the user item */
.user-item {
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
margin: 10px 0;
background-color: #fff;
}
.user-name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.user-email {
font-size: 14px;
color: #777;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
}
.modal-content {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.modal-content h2 {
margin-bottom: 10px;
}
/* Styles for the input fields and buttons in the edit modal */
.input-field {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.button-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.save-button {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.save-button:hover {
background-color: #45a049;
}
.close-button {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.close-button:hover {
background-color: #d32f2f;
}
</style>
</body>
</html>