CODEWITHSUNDEEP
javascriptreactjs
user23424
user23424

Reputation: 71

Conditional rendering of a div based on state in react

Below is a authentication component that handles both registering and login of a user into an application. The approach used was to conditionally render a div based on whether a user had signed up in the application before or they are a new user. The div doesn't change based on the initial state and based on the conditions set. In this case, the isSignUp state is false therefore the user hasn't signed up before hence all the fields are supposed to be available for data input by the user but the fields have been ommited. Below is the code

const {isSignUp, setisSignUp} = useState(false);

<form onSubmit = {handleSubmit} className = 'form'>
  {isSignUp && (
    <div className='auth-form-field'>
      <input
      name="Full Name"
      type="text"
      placeholder="Full Name"
      className =  "form-input"
      onChange={handleChange}
      required
      />
    </div>
  )}  
  <div className='auth-form-field'>
      <input
      name="Email"
      type="text"
      placeholder="Email"
      className =  "form-input"
      onChange={handleChange}
      required
      />
  </div>
  { isSignUp && (
    <div className='auth-form-field'>
      <input
      name="User Name"
      type="text"
      placeholder="User Name"
      className =  "form-input"
      onChange={handleChange}
      required
      />
    </div>)
  }
  <div className = 'auth-form-field'>
    <input
    name="Password"
    type="password"
    placeholder="Password"
    className =  "form-input"
    onChange={handleChange}
    required
    />
  </div> 
  {isSignUp && (
    <div className = 'auth-form-field'>
      <input
      name="Confirm Password"
      type="password"
      placeholder="Confirm Password"
      className =  "form-input"
      onChange={handleChange}
      required
      />
    </div>)
  }      
</form>

Upvotes: 0

Views: 906

Answers (2)

Lakshya Jain
Lakshya Jain

Reputation: 115

The Correct syntax to use useState is with square brackets, like this

const [isSignup, setIsSignUp] = useState(false);

Upvotes: 3

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

Your syntax of useState is incorrect here

Correct syntax:

const [isSignUp, setisSignUp] = useState(false);

Upvotes: 3

Related Questions