Conditional rendering of a div based on state in react

Question

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>

Surjeet Bhadauriya · Accepted Answer · 2022-01-04 07:13:05Z

3

Your syntax of useState is incorrect here

Correct syntax:

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

answered Jan 4, 2022 at 7:13

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lakshya Jain · Accepted Answer · 2022-01-04 07:14:18Z

3

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

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

answered Jan 4, 2022 at 7:14

Lakshya Jain

1156 bronze badges

Collectives™ on Stack Overflow

Conditional rendering of a div based on state in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related