estoy trabajando en un proyecto de react js y tengo un usuario cuyo nombre quiero actualizar cuando hago clic en un pequeño icono de actualización, el problema es que estoy mostrando su nombre como texto y cuando hago clic en el icono quiero el texto para activar una entrada para que pueda cambiarla y luego, cuando hago clic en Intro en el teclado o en el ícono de actualización nuevamente, se vuelve a activar un texto con el nuevo nombre, tal vez esta imagen te haga entender más lo que quiero hacer

Pensé en 2 métodos, el primero es tener una etiqueta jsx de entrada y una variable booleana y depende de esta variable. Cambio el css de la entrada para que se vea como un texto cuando la variable es falsa y como una entrada si es verdadera.

el segundo es tener una etiqueta ap y una etiqueta de entrada y depende de la variable que hago, una muestra y la otra oculta

Pero siento que hay una manera mucho mejor de hacerlo, así que ¿alguna ayuda, por favor?

Gracias.