07 Enable

Let's continue with the update name sample, this time we want to disable the "update" button when the input is empty or when the value hasn't changed.

We will take a startup point sample 06 MoveBacktOStateless.

Summary steps:

• Add a condition to disable

Prerequisites

Install Node.js and npm (v6.6.0 or newer) if they are not already installed on your computer.

Verify that you are running at least node v6.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions may produce errors.

Steps to build it

• Copy the content from 06 MoveBacktoStateless.

• Let's start by adding a condition to disable the field whenever is empty. Replace only the input tag in src/nameEdit.tsx with the following code:

 <input type="submit" value="Change"
   className="btn btn-default"
   onClick={props.onNameUpdateRequest}
   disabled={props.editingUserName === ''}
   />

• Now comes the tricky part, detect when the name hasn't changed.
  First we will add a new property called userName with type string in src/nameEdit.tsx. This one will hold the last accepted userName.

interface Props {
   UserName : string;
   editingUserName : string;
   onEditingNameUpdated : (newEditingName : string) => any;
   onNameUpdateRequest : () => void;
}

• We will add to the enable condition one more test, checking if name has changed. Replace again only the input tag in src/nameEdit.tsx with the following code:

<input type="submit" value="Change"
   className="btn btn-default"
   onClick={props.onNameUpdateRequest}
   disabled={props.editingUserName === '' || props.UserName === props.editingUserName}
 />

• Now we have to feed this property from the parent control (Add UserName={this.state.userName} to the NameEditComponent in src/app.tsx). The NameEditComponent should be like:

<NameEditComponent
   UserName={this.state.userName}
   editingUserName={this.state.editingUserName}
   onEditingNameUpdated={this.updateEditingName.bind(this)}
   onNameUpdateRequest={this.setUsernameState.bind(this)}
/>

• Let's give a try

npm start