Create Toast Message Component to Show Upon Validation Error (Optional)

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.3 instructor rating • 21 courses • 38,698 students

Learn more from the full course

Build an Online Store with React and GraphQL in 90 Minutes

Create a full-stack e-commerce app from scratch using React, GraphQL, Stripe, and the Headless CMS Strapi in record time

03:40:57 of on-demand video • Updated December 2019

  • Create e-commerce apps with React and GraphQL
  • Make full-stack React apps in a very short period of time
  • Learn how to integrate the payment service Stripe with React applications
  • Send emails to users of your React applications
  • Build attractive, mobile-first user interfaces
English [Auto] The last video we provided some basic validation to our Sign-Up form so that the user doesn't provide value to any one of the inputs. Then our form isn't submitted but instead of handling the validation in this way within handle submit when the form is empty will be better to show the user a toast message which we could call with show toast or tells them the message. For example fill in all fields to tell them what's going wrong let's create this function must create show toast and it'll accept one argument. Joe Cole toast message the first thing we want to do is we want to make this message visible and show the message itself. We'll add a couple of values within state toast which will control the visibility of the message initially set the compulsed and post message which will be the text for the notification which will be an empty string initially. So will set the state within Shoto. Was that toasted true to reveal the message that text message to the value that we passed in when we called the function. Then after a certain period of time we want to hide it. So use this we'll do this using a set time out function after a certain period of time will set Kostopoulos to hide it and we'll set those message back to an empty string. And let's do this maybe over five seconds. So after five seconds or 500 milliseconds will hide the text message. Let's create a dedicated component for this which I'll call text message and we'll add it to our components folder. At the top we'll need to bring in react and we'll be using the TOSed component from gestalt. So this will be a statelets functional component post-marriage we can immediately return it within parentheses. And for now it's just provide our toast component within it and just export default Tosa message. We can set a number of props on toast. We can set the color for example to orange and we can set the text Propp which are getting from TOSed message and now we want to import it within Sign-Up and add it to the very bottom of the markup say right before the ending tag of our container weren't close message to be available to be passed down to our Toastmasters component or Toastmasters piece of state we'll pass that down as a message prop and we can structure that from our state within render the concert message as well as toast be equal to the start state and again toast will control the tone of say it will control the visibility and will pass it down as show proper as the show proper. So we're passing down to prop's show and message pass message to our text Propp and we'll conditionally show or hide the text message the toaster component. I should say with show so it's true. We will see the TOSed component of just wrap these in parentheses and put this on a separate line. We're also going to use a box box component from gestalt in order to Stout's a bit move this over and unbox. We once again want to set dangerously set in lifestyle and we can grab all of the rules that we had within our loader component where we're setting bottom two 300. In this case let's set it to 250 and we're setting left to 50 percent and to translate x negative 50 percent as well as position fixed to put it right in the middle of the page. Now when we say that we can see we have in the middle of the page our message telling us to fill in all the fields it looks like we're still submitting the form. So we need to change this up a bit. We want to return whenever we show this tOSU message meaning that we're not executing any other part of our handle submit function so that when we click on submit we're not seeing our submitted log within the con.. Meaning that our form isn't being sent off our formating data isn't being sent out to our backend only when we provide all of the field other fields all of the values to each of the text inputs do we see submitted.