Lemoncode/react-by-sample

Extend sample 07 Enable

brauliodiez opened this issue · 0 comments

A the end of the sample, include a solution to make a generic enable boolean property (include readme steps plus update real code), tips:

(pseudocode)

app.tsx

        <NameEditComponent 
+          disable={!this.state.userName || this.state.userName === this.state.editingNAme}          
          editingUsername={this.state.editingUsername}
          onEditingNameUpdated={this.updateEditingName}
          onNameUpdateRequest={this.setUserNameState}
        />

nameEdit.tsx

interface Props {
+  disable: boolean;
  userName : string;
  editingUsername: string;
  onEditingNameUpdated: (newEditingName: string) => void;
  onNameUpdateRequest: () => void;
}

export const NameEditComponent = (props: Props) => 
    <>
      <label>Update name: </label>
      <input value={props.editingUsername} onChange={onChange(props)} />
      <button className="btn btn-default" 
              onClick={props.onNameUpdateRequest}
+              disabled={props.disable}
      >
      Change
      </button>
    </>

This issue will be assigned to @HecFranco once accepts the project invite.