CODEWITHSUNDEEP
reactjsformsif-statementbuttoninput
Francesco Esposto
Francesco Esposto

Reputation: 184

Change form from onRead to Edit through button

This is user profile settings page: Box

What I would like to do is have the input fields enabled and disable them once the Save button is pressed. After this operation "edit" button becomes enable and pressing it also the input fields return enabled.

1)Profile Page --> Form readOnly=disabled and "Edit" button=disabled --> Fill in form --> Save --> Form readOnly=enabledand "Edit" button=enabled.

When a user save his info:

2)Form readOnly=enabled and "Edit" button=enabled --> Click "Edit" button ---> Form readOnly=disabled and "Save" button=enabled --> fill in form...

I reread the whole guide on reactjs.org but I can't solve the problem starting from the theory. Without practical examples I can't learn and I haven't found any by googling.

Upvotes: 1

Views: 590

Answers (2)

Aib Syed
Aib Syed

Reputation: 3196

I've replicated your desired functionality in a code sandbox and added comments to help you understand what is going on.

Please take a look here: https://codesandbox.io/s/youthful-rain-7nqwq?file=/src/Form.js

Let me know if you have any questions.

Upvotes: 2

Kevin Nett
Kevin Nett

Reputation: 429

How to have read-only vs editing state: You just need to have state to determine if you're editing or not, say isEditing - then set the fields disabled based on it. (Or swap the fields out for plain text displays or whatever)

The edit button would set isEditing = true, and the save button would set it back to false.

Upvotes: 1

Related Questions