Client side messages- React

Hello again, since my previous question was answered and my lack of backend knowledge is still the same(which is very little), I was hoping to get some help with yet another problem I am having. I am using React, Express and Node and would like to display a success or error message when a person submits my form. This seems like it would be easy but I can’t find anything on this, I’m so lost. Thank you in advance to anyone who can offer some help.

So this is going to be very rough pseudocode but one way to do it:

So for example. you have a component which contains a form. Its state is going to contain two key things: whether the form is submitted (true or false), and the contents of the form (starts off empty, fills up as the user types).

The component will have a child component, which will render depending on whether the form is submitted or not. It has to take something representing the contents of the form as a prop. Its state should be a message (that’s going to come from the API).

If it isn’t submitted, the message component just isn’t rendered.

When submit is pressed on the form, that will change the state to submitted. At that point the form should be either hidden or disabled: the user has to be prevented from interacting in some way.

The message component will now be mounted. In it’s componentDidMount callback, a POST request is made to the endpoint, passing it the data from the form. Whatever comes back gets its body parsed and set as the state.

Okay, so I understand the first part, I think. Right now my Form component has a state with isSubmitted equal to false. When user presses the submit button that state gets changed to true and then calls a Axios post request. I have a Message component that has it’s props equal to the Form components isSubmitted state. So if true I should make another post request in the Message component?

There are various ways to do this, but in what I described (and bear in mind there are different ways to approach this, it’s not necessarily the only way), there should be one request, and that request can be made in the componentDidMount function of the message, not the form. The reason for doing it that way is that then you only ever need to pass things downwards. React needs a lifecycle callback to run stuff like Ajax requests, and the easiest place to do them is to grab data as a component is rendered. The form component just holds whatever the user types, then it passes that down to the message component, which can run the API request when it has mounted, and the message component will only ever render a success/error message.

I’m getting there, lol. Thank you so much for your help so far, now I have everything working but my current issue is the message only displays if I e.preventDefault the form submit but this keeps everything on the page. Otherwise, without that function the page clears but no message is displayed

1 Like

So, React kinda wants you to always prevent the default. Basically, the “form” could in fact just be a div with some inputs and a button, and it should still work the same (you probably want it to be a form because you still get a few HTML niceties, but anyway). What you’re doing is just collecting the values of the input/s, and then sending them via AJAX, you’re bypassing HTML form submission. So it would be correct to prevent default (the default is to send via the HTML form and reload the page, and you don’t want the page to reload).

If you haven’t looked at this already, it’s quite important with regards to how React expects forms to work (and you’ll see that the submit function uses preventDefault to stop the form working like a normal HTML form):

Thank you for your help and all the information. After a bit more research and some trial and error everything is working great now.

1 Like