How can a click handler ignore a modal window?

Question

React

Hello.
I have a component that renders a p tag with content, if we want to change the content, then we need to click on the element, then we will have an input where we can already edit the content. To get back to a simple view of the content, you need to click anywhere in the DOM. To save the data, you just need to press Enter.
Everything works well, but if the user wants to close the input by clicking on any place in the DOM, but the content has changed, then you need to display a popup that there is unsaved data. The problem is that the handler also affects the modal and you need to somehow ignore this.
Here is an example - https://codesandbox.io/s/jpzq1n6r85
Thanks

Answer 1

Somehow you overcomplicated everything.
Why hang a click handler on the body? - you can also add an input autoFocus={true}and disable editing on the blur event. So the problem with unnecessary triggering of the click handler will be solved by itself.
How are you going to undo the results of editing if you constantly overwrite the state? - the previous value is lost. It is better to cut out the onChange handler, and set defaultValue instead of value.
Does it look like what you were aiming for ?