How to make input field editable on a button click separately in React?

Question

I have some data coming from database which I have shown on the UI. But I want to make those field editable on a button click. I have added images below for better understanding.

Default View

After Clicking The Edit Button

As you can see from the pictures I want something like this: When I click on the edit button the corresponding field get editable and the edit button change to save button. And when clicking the save button data will be submitted to an API, and the view will be change as before. How Can I do that.

This is my simple Code

 <div className="col-sm-10 d-flex align-items-center">
    <input
    className="form-control mx-1"
    value={item.name}
    disabled
    />
    <button className="text-end">
        <i
        style={{ color: "blue" }}
        className="fas fa-edit d-block"
        ></i>
    </button>
</div>

Answer 1

You can use state of boolean value that will triger the disable part in the input.

 const [disableButton,setDisableButton] = useState(false)
 
<div className="col-sm-10 d-flex align-items-center">
    <input
    className="form-control mx-1"
    value={item.name}
    disabled={disableButton}
    />
    <button className="text-end" onClick={() => setDisableButton(!disableButton)}>
        <i
        style={{ color: "blue" }}
        className="fas fa-edit d-block"
        ></i>
    </button>
</div>