From the parent component. There are other forms, hence, there is a conditional form where it will used the child component's form.
A user may click the button to show the form from the child component.
const [isTrue, setIsTrue] = useState(false);
<ButtonForm onClick={() => setIsTrue(true)}>
Click for the Form
</ButtonForm>
{isTrue == true ? (
<Form
data={entryData}
items={items}
names={names}
/>
) : (
></>
)}
This is the child component. The problem here is that, everytime I'll submit it, it will reload the page:
const Form = ({ entryData, items, names }) => {
const handleSubmit = (e) => {
e.preventDefault();
try {
console.log(" saved");
} catch (err) {
console.log(err);
}
};
return (
<>
<form onSubmit={handleSubmit}>
//some codes here
<Grid item>
<TextField
type="text"
label="Item Number"
variant="outlined"
fullWidth
required
/>
</Grid>
//some codes here
<Grid item>
<Button type="submit" fullWidth>
Submit
</Button>
</Grid>
</form>
<br /> <br />
</>
);
};
export default Form;
This is the sample parent component: most where just forms
<div className="App">
<Card className={classes.root}>
<CardContent>
{users &&
users.map((user) => (
<li style={{ listStyle: "none" }}>
<Button onClick={() => setIsTrue(true)}>
Click for the Form
</Button>
{//if user condition is true here == true ? (
<div>
//form here with the textfields
</div>
) : (
<div>
//form here with the textfields
</div>
)}
</li>
))}
</>
{isTrue == true ? (
<Form
data={entryData}
items={items}
names={names}
/>
) : (
></>
)}
</CardContent>
</Card>
</div>
// on click trigger submit in first and second forms
<form>
<form>
<button type="submit" />
</form>
<button type="submit" />
</form>;
//solution
<form onSubmit={(e) => e.preventDefault()}>
<form onSubmit={(e) => e.preventDefault()}>
<button type="submit" /> // on click trigger submit in first and second form
</form>
<button type="submit" />
</form>;