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>

you can use boolean values for the attributes. Refer https://stackoverflow.com/a/31164090/4556029 — manpreet, Apr 19 '22 at 07:40

score 1 · Answer 1 · answered Apr 19 '22 at 07:22

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>

answered Apr 19 '22 at 07:22

yanir midler

2,153
1
4
16

But it will enable all the disabled input fields. What I want is to enable only the corresponding input field. – Nahidujjaman Hridoy Apr 19 '22 at 07:23
you can use it on what ever input you want to. i just gave you the logic how to use it when button had pressed . – yanir midler Apr 19 '22 at 07:26

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

1 Answers1