Let's figure out why it isn't working
- You may be missing the
handleInputChange handler
Let's find a solution for this issue
- Consider
ShowEdit as your component name
- There is a loader to fetch data from your local database before rendering the component
- There is an action method for form submission
isPull state variable to fetch data from a separate database and re-render the componentnavigator is used to reset after form submission
import {Form, useActionData, useLoaderData, useNavigate} from "react-router-dom";
import {useEffect, useState} from "react";
import 'react-toastify/dist/ReactToastify.css';
import {Button} from "react-bootstrap";
function ShowEdit() {
const actionDataAfterSave = useActionData();
const flat = useLoaderData();
const navigator = useNavigate();
const [formData, setFormData] = useState(flat);
const [isPull, setIsPull] = useState(false);
useEffect(() => {
let flat_no = flat.flat_no;
let url = 'url-to-your-separate-db-application/get-flat-info?flat_no='+flat_no;
let flatFromRemoteDb = await fetch(url, {
method: 'GET',
headers: {
'Content-type': 'application/json'
}
}).then(response => response.json());
setFormData(flatFromRemoteDb);
}, [setIsPull]);
useEffect(() => {
if(actionDataAfterSave) {
// reset
navigator('/show-edit')
}
}, [actionDataAfterSave]);
const onPullHandaler = () => {
setIsPull(true);
}
const handleInputChange = (e) => {
const {name, value} = e.target;
setFormData((previousState) => {
return {...previousState, [name]: value}
})
}
return (
<>
<Form method='post'>
<div className="mb-3">
<label htmlFor="name" className="form-label">
Flat no.
</label>
<input
type="text"
className="form-control"
name="name"
value={formData.flat_no}
onChange={handleInputChange}
/>
</div>
<div className="mb-3">
Other form fields here
</div>
<Button variant="primary" onClick={onPullHandaler}>
Pull
</Button>
<Button type='submit' variant="primary">
Submit
</Button>
</Form>
</>
);
}
export default ShowEdit;
export async function loader({params}) {
let flat_no = params.flat_no;
let url = 'url-to-your-local-db-application/get-flat-info?flat_no=' + flat_no;
let flat = await fetch(url, {
method: 'GET',
headers: {
'Content-type': 'application/json'
}
}).then(response => response.json());
return flat;
}
export const action = async ({request}) => {
let flat;
let reqObject = {}
const formData = await request.formData();
formData.forEach((value, key) => (reqObject[key] = value));
let url = reqObject.id ? `path-to-your-local-db-update-action` : `path-to-your-local-db-save-action`;
let method = reqObject.id ? 'PUT' : 'POST';
try{
flat = await fetch(url, {
method: method,
body: JSON.stringify(reqObject),
headers: {
'Content-type': 'application/json'
}
}).then(response => response.json());
}
catch (e) {
console.log(e);
return {success: 0, msg: 'Something went wrong.'}
}
return flat;
}
- Your router configuration should look like this in main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {createBrowserRouter, RouterProvider} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import {action as myAction, loader as myLoader} from './ShowEdit.jsx';
import ShowEdit from "./components/routeComponents/ShowEdit.jsx";
import Home from "./components/routeComponents/Home.jsx";
const router = createBrowserRouter([
{
path: '/', element: <Home/>
},
{
path: '/', element: <ShowEdit />,
loader: myLoader,
action: myAction
}
]);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>,
)