'Manage submission for form in form in React

I'd like to manage submission for a particular form, but I'm having trouble with the submission behavior. Here's a bit of context:

I have a form to type a message (1st form). My user can save the current state of his message as a template so that he can use it again later on.

When saving his template, he has to provide a name for the template (2nd form). This 2nd form has its HTML inside of the 1st form's

Both form have a submit button. Unfortunately, when the template name input is focused, pressing enter will submit both forms.

Is there a way to specify that I only want the closest parent form to be submitted?

html reactjs forms

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source