Make SignUp a controlled component

Author: SafdarJamal

src/components/SignUp/index.js

@@ -1,7 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const SignUp = ({ handleChange, handleSubmit, error }) => {
+const SignUp = ({
+  firstName,
+  lastName,
+  email,
+  password,
+  handleChange,
+  handleSubmit,
+  error
+}) => {
   return (
     <div>
       <form onSubmit={handleSubmit}>
@@ -11,27 +19,31 @@ const SignUp = ({ handleChange, handleSubmit, error }) => {
           type="text"
           name="firstName"
           placeholder="First Name"
+          value={firstName}
           onChange={handleChange}
         />
         <br />
         <input
           type="text"
           name="lastName"
           placeholder="Last Name"
+          value={lastName}
           onChange={handleChange}
         />
         <br />
         <input
           type="email"
           name="email"
           placeholder="Email"
+          value={email}
           onChange={handleChange}
         />
         <br />
         <input
           type="password"
           name="password"
           placeholder="Password"
+          value={password}
           onChange={handleChange}
         />
         <br />
@@ -42,9 +54,13 @@ const SignUp = ({ handleChange, handleSubmit, error }) => {
 };
 
 SignUp.propTypes = {
+  firstName: PropTypes.string.isRequired,
+  lastName: PropTypes.string.isRequired,
+  email: PropTypes.string.isRequired,
+  password: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleSubmit: PropTypes.func.isRequired,
-  error: PropTypes.string.isRequired
+  error: PropTypes.string
 };
 
 export default SignUp;

src/containers/SignUpContainer/index.js

@@ -12,7 +12,7 @@ class SignUpContainer extends Component {
     lastName: '',
     email: '',
     password: '',
-    error: ''
+    error: null
   };
 
   handleChange = e => {
@@ -53,11 +53,17 @@ class SignUpContainer extends Component {
   };
 
   render() {
+    const { firstName, lastName, email, password, error } = this.state;
+
     return (
       <SignUp
+        firstName={firstName}
+        lastName={lastName}
+        email={email}
+        password={password}
         handleChange={this.handleChange}
         handleSubmit={this.handleSubmit}
-        error={this.state.error}
+        error={error}
       />
     );
   }