Desde el componente principal. Hay otras formas, por lo tanto, hay una forma condicional donde usará la forma del componente secundario.
Un usuario puede hacer clic en el botón para mostrar el formulario del componente secundario.
const [isTrue, setIsTrue] = useState(false); <ButtonForm onClick={() => setIsTrue(true)}> Click for the Form </ButtonForm> {isTrue == true ? ( <Form data={entryData} items={items} names={names} /> ) : ( ></> )}Este es el componente hijo. El problema aquí es que, cada vez que lo envíe, volverá a cargar la página:
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;Este es el componente principal de muestra: la mayoría donde solo formularios
<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>;