i am working on a react js project and i have a user which i want to update his name when i click on a small update icon , the problem that i am displayin his name as a text and when i click on the icon i want the text to turn on to an input so i can change it then when i click on enter in keyboard or the update icon again it turns on to a text again with the new name maybe this image will make u understand more what i want to do

I thought of 2 methods the first one is to have an input jsx tag and boolean variable and depends on this variable i change the css of the input to make it looks as a text when the variable is false and as an input if it is true

the second one is to have a p tag and an input tag and depends on the variable i make one shows and the other hidden

But i feel like there is a very much better way to do that so any help please ?

Thank you.