React elements are not rendering-CodePudding

The page consists of two input fields one is labeled as username and the other one is labeled as Age, followed by a button. I'm not sure what I'm doing wrong, the page is just blank.

[![Current Output][1]][1]

[![Expected Output][2]][2]

Node Version: 15.3.0 Npm: 8.3.0

Adduser.js:

import Card from '../UI/Cards';
import classes from './AddUser.module.css'
import Button from '../UI/Button';

function AddUser() {
const [entereUsername, setEnteredUsername] = usestate('');
const [enteredAge, setEnteredAge] = useState('');

  const addUserHandler = (event) => {
    event.preventDefault();
  };

  const usernameChangeHandler = (event) => {
    setEnteredUsername(event.target.value)
    console.log(entereUsername, enteredAge)
  }

  const ageChangeHandler = (event) => {
    setEnteredAge(event.target.value)
  }

  return (
    <Card className={classes.input}>
      <form onSubmit={addUserHandler}>
        <label htmlFor="username">Username</label>
        <input id="username" type="text" onChange={usernameChangeHandler}/>
        <label htmlFor="age">Age (Years)</label>
        <input id="age" type="number" onChange={ageChangeHandler}/>
        <Button type="submit">Add User</Button>
      </form>
    </Card>
  );
}

export default AddUser;

Button.js


function Button(props) {
  return (
    <button
      className={classes.button}
      type={props.type || "button"}
      onClick={props.onClick}
    >
      {props.children}
    </button>
  );
}

export default Button;

Console :

AddUser.js:7 Uncaught TypeError: Object is not a function or its return value is not iterable
    at AddUser (AddUser.js:7:1)
    at renderWithHooks (react-dom.development.js:16141:1)
    at mountIndeterminateComponent (react-dom.development.js:20838:1)
    at beginWork (react-dom.development.js:22342:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
    at invokeGuardedCallback (react-dom.development.js:4270:1)
    at beginWork$1 (react-dom.development.js:27243:1)
    at performUnitOfWork (react-dom.development.js:26392:1)
    at workLoopSync (react-dom.development.js:26303:1)
    at renderRootSync (react-dom.development.js:26271:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25577:1)
    at workLoop (scheduler.development.js:266:1)
    at flushWork (scheduler.development.js:239:1)
    at performWorkUntilDeadline (scheduler.development.js:533:1)
    at run (setImmediate.js:40:1)
    at runIfPresent (setImmediate.js:69:1)
    at onGlobalMessage (setImmediate.js:109:1) ```


  [1]: https://i.stack.imgur.com/rPVCy.png
  [2]: https://i.stack.imgur.com/fGYTX.png

CodePudding user response：

Try to use following code in your Button component.

Error seems to be thrown because you don't pass onClick as props when you use Button component.

function Button(props) {
  return (
    <button
      {...props}
      className={classes.button}
      type={props.type || "button"}
    >
      {props.children}
    </button>
  );
}

export default Button;

You have a typo here: const [entereUsername, setEnteredUsername] = usestate(''); usestate --> useState

Change it by following:

const [entereUsername, setEnteredUsername] = useState('');

CodePudding user response：

Adduser.js

import Card from '../UI/Cards';
import classes from './AddUser.module.css'
import Button from '../UI/Button';

function AddUser() {
const [entereUsername, setEnteredUsername] = useState('');
const [enteredAge, setEnteredAge] = useState('');

  const addUserHandler = (event) => {
    event.preventDefault();
  };

  const usernameChangeHandler = (event) => {
    setEnteredUsername(event.target.value)
    console.log(entereUsername, enteredAge)
  }

  const ageChangeHandler = (event) => {
    setEnteredAge(event.target.value)
  }

  return (
    <Card className={classes.input}>
      <form onSubmit={addUserHandler}>
        <label htmlFor="username">Username</label>
        <input id="username" type="text" onChange={usernameChangeHandler}/>
        <label htmlFor="age">Age (Years)</label>
        <input id="age" type="number" onChange={ageChangeHandler}/>
        <Button type="submit">Add User</Button>
      </form>
    </Card>
  );
}

export default AddUser;

Button.js

function Button(props) {
  return (
    <button
      {...props}
      className={classes.button}
      type={props.type || "button"}
    >
      {props.children}
    </button>
  );
}

export default Button;