I know there are question asked before, but I have tried the solution but it’s not working. I have split the component differently but then also it refresh on every single keypress.
const TenementRegistration = () => {
const [show, setShow] = useState(false);
const [name, setName] = useState("");
const [editId, setEditId] = useState("");
function Example() {
const onSubmitHandler = async () => {
const data = {
name: name
}
await services.postService("User", data).then((res) => {
onGetUserData();
});
}
return(
<Modal
show={show}
onHide={() => setShow(false)}
size="lg"
aria-labelledby="example-custom-modal-styling-title"
scrollable="true"
centered
animation="true"
>
<Modal.Header closeButton>
<Modal.Title id="example-custom-modal-styling-title">
Add User
</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="form-container">
<form>
<Row>
<div className="form-group col-12 col-md-6 center">
<label for="inputName" className="asy-FormLabel">
Name
</label>
<input
type="text"
className="form-control asy-InputValues"
id="policyName"
placeholder="Enter Property Id"
onChange={(e) => {
setName(e.target.value);
}}
value={Name}
required
/>
</div>
</Row>
</form>
</div>
</Modal.Body>
<Modal.Footer>
<button
type="button"
className="submit-button"
onClick={() =>
{
onSubmitHandler();
}}
>
Submit
</button>
</Modal.Footer>
</Modal>
const [data, setData] = useState([]);
useEffect(() => {
onGetUserData();
}, []);
const onGetUserData = async () => {
services.getService("User").then((res) => {
setData(res.data);
});
};
const onEditData = async (id) => {
setShow(true);
const newData = data.filter((obj) => obj.id === id)[0];
setName(newData.name);
}
//Table where we show name and pass id to update button
}
I have also tried to Split the Modal and separate the form (not in this example) but it didn’t work any suggestions how to handle the modal problem