I want to import the following components from the app component.

I don't know if the following reason appears. : 'signUp Component' is declared but its value is not read

Also, clicking the button doesn't work. How can I solve it?

import logo from './logo.svg';
import './App.css';
import {useState} from 'react';
import signUpComponent from './SignUpComponent';

function App() {
  
  const [signUpState, setSignUpState] = useState(false);
  
  function controllSignUp(){
      setSignUpState(!signUpState)
  }

  return (
    <div className="App">
        <div className ="SignIn">
            <h1>LOGIN</h1>
            <form className = "loginForm">
                <label htmlFor="email">email</label>
                    <input
                      id="email"
                      type="email"
                      name="email"
                      placeholder="[email protected]"
                    />
                <label htmlFor="password">password</label>
                    <input
                      id="password"
                      type="password"
                      name="password"
                      placeholder="****************"
                    />
                <button type="submit">login</button>
              </form>
            <button onClick={controllSignUp}>signin</button>
            {signUpState && <signUpComponent/>}
        </div>
    </div>
  );
}

export default App;

CodePudding user response：

User-Defined Components Must Be Capitalized.

Instead of

import signUpComponent from './SignUpComponent';

you need to do

import SignUpComponent from './SignUpComponent';

CodePudding user response：

export default function signUpComponent(){

    return(
        <div>
            <form className = "signUp">
                <label htmlFor="email">email</label>
                    <input
                      id="email"
                      type="email"
                      name="email"
                      placeholder="[email protected]"
                    />
                <label htmlFor="password">password</label>
                    <input
                      id="password"
                      type="password"
                      name="password"
                      placeholder="****************"
                    />
                <button type="submit">signup</button>
              </form>   
        </div>
    )
}