[#140655219] [REFACTOR] #25 Refactor Profile Page for accepting form changes

assets/js/ProfilePage.jsx

@@ -26,6 +26,7 @@ export default class ProfilePage extends React.Component {
       showTranscript: '',
     };
     this.getProfile = this.getProfile.bind(this);
+    this.handleChange = this.handleChange.bind(this);
     this.getProfile();
   }
 
@@ -68,6 +69,10 @@ export default class ProfilePage extends React.Component {
     }
   }
 
+  handleChange = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+
   updateForm(show) {
     if (show) {
       return (
@@ -81,19 +86,19 @@ export default class ProfilePage extends React.Component {
           <Form size="small" onSubmit={this.handleSubmit}>
             <Form.Field>
               <label htmlFor="photo">Profile Picture</label>
-              <input placeholder="Profile Photo.jpg" name="photo" type="File" />
+              <input onChange={this.handleChange} placeholder="Profile Photo.jpg" name="photo" type="File" />
             </Form.Field>
             <Form.Field>
               <label htmlFor="email">Email</label>
-              <input placeholder="jojon@email.com" name="email" />
+              <input onChange={this.handleChange} placeholder="jojon@email.com" name="email" />
             </Form.Field>
             <Form.Field>
-              <label htmlFor="phone">No Hp</label>
-              <input placeholder="08123456789" name="phone" />
+              <label htmlFor="phone">No. Hp</label>
+              <input onChange={this.handleChange} placeholder="08123456789" name="phone" />
             </Form.Field>
             <Form.Field>
               <label htmlFor="resume">Resume</label>
-              <input placeholder="Resume" name="resume" type="File" />
+              <input onChange={this.handleChange} placeholder="Resume" name="resume" type="File" />
             </Form.Field>
             <Button type="submit" size="small" primary floated="right">Submit</Button>
           </Form>