change components to next when a button is pressed-CodePudding

I'm learning next and react, I'm creating a project. I created two components "form.js" and "feedback.js", in the main page "index.js" I import "form.js", but I would like that when you press the button to send the data to the db, the component "form .js "is replaced with the component" feedback.js ", what can I do? thank you

file form.js:

import styles from '../styles/Home.module.css'


export default function Form(){
    return(
    <>
    <form method='POST' action="">
            <label>Name</label>
            <input 
              type="text" 
              name="Name" 
              pattern="[A-Za-z] "
              title="Your name"></input>
  
            <label>Surname</label>
            <input 
              type="text" 
              name="Surname" 
              pattern="[A-Za-z] "
              title="Your surname"></input>
  
            <label>Email</label>
            <input 
              type="email" 
              name="email" 
              pattern="[a-z0-9._% -] @[a-z0-9.-] \.[a-z]{2,}$"
            ></input>
  
            <button className={styles.btn} type="submit">Send</button>
  
          </form>
          </>
          )
  }

file feedback.js:

import styles from '../styles/Home.module.css'

export default function SuccesForm(){
    return(
        <>
        <h3>Form sent successfully</h3>
        </>
    )
}

file index.js:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Form from '../components/form'
import Feedback from '../components/feedback'



export default function Home({utenti}) {
  
  return (  
    <>
    <header className={styles.header}>
      <a><h1>LOGO</h1></a>
    </header>
    
    <div className={styles.hero}>
      <div className={styles.sectionSX}>
       <h3>Hello</h3>
      </div>

       <div className={styles.sectionDX}>
        <Form></Form>
        
      </div>

    </div>

    
    </>
  )
}

CodePudding user response：

There are a few ways to do that, but I would recommend to define a boolean state which indicates whether the form has been submitted or not, in index.js. Pass state setter from index.js to form.js via passing props. Set state to true when user submits.

In index.js, using ternary operator and the state, show form or feedback component conditionally, like this: isSubmitted ? <Feedback /> : <Form setState={setIsSubmitted} />.

I recommend you to read the official doc about state and passing props. Focus on the-data-flows-down section.

CodePudding user response：

First, create a prop that we will pass to the main page, so we can set the function on our main page.

FORM COMPONENT

import React from "react";

const Form = (props) => {
  return (
    <form onSubmit={props.submit}>
      <input type="text" />
      <input type="submit" value="Submit" />
    </form>
  );
};

export default Form;

Then on the main page create a boolean state that controls if the form has been sent.

As default it will be false, but as soon as the form is sent it will switch to true thanks to the handleSubmit function and show your message (or feedback component) and remove the form component.

MAIN PAGE

import Form from "./components/Form";
import { useState } from "react";

function App() {
  const [isSubmitted, setIsSubmitted] = useState(false); 

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsSubmitted(true);
  };

  return (
    <div className="App">
      {!isSubmitted ? (
        <Form submit={handleSubmit} />
      ) : (
        <h1>Thank you for your submission!</h1>
      )}
    </div>
  );
}

export default App;