I'm building a site for a project,I have a divided into 50% 50% with display grid, on the right side there is the form, once sent I would like it to show a confirmation or error message , what can I do? i am using nextjs the form must disappear and show the message

i could use display none, is there a better method? maybe using the components. Thank you

CodePudding user response：

Well if it were me, ill create a separate feedback component and once the form is submitted, ill send a response be it an error message or success message. And maybe add a close button plus a timer to close the component.

CodePudding user response：

You can use React portals to access the right side of your app from the left side and render components in it.

1. I would create a Notification component.

const Notification = ({ message, hideAfterMs }) => {

  const [visible, setVisible] = React.useState(true);

  React.useEffect(() => {
  
    const timeout = setTimeout(() => { setVisible(false); }, hideAfterMs);
  
    return () => {
      clearTimeout(timeout);
    }
  }, [setVisible]);
  
  if(visible)
    return <div>Notification: {message}</div>
    
  return null;
}

2. Use the portal to render a notification on the side of your app.