Creating a button that edits another element in React

Creating a button that edits another element in React
0

#1

I’m working on a React project and I’m stuck.

I have an HTML button that when clicked I want it to edit another HTML element’s content i.e. the user clicks the button and an li element is editable and allows the user to type in text and then the li is updated.

How would I do this in React? I have the button, the li, and state set up. How would I make the li element focus and become editable when the user clicks the button?


#2

There are plenty of ways to do that. I made a quick sketch to show one. From this I think you can figure out what would makes sense for you. The concept in this example is that there is a container element for the li and the button, this container’s state is holding the content of the li. By changing the container’s state you change the li’s content. The button in this case is responsible for changing that state.


#3

Thanks for the visualization. What’s throwing me off is how to make an element editable by the user on click.