Browser displays TypeError: Cannot read property ‘user’ of undefined

First i do like to apologize if it’s a noob mistake. I’m trying to do a login page but i keep encountering this error. How can i fix this? Thank you all!

Image of Error Code image

import React, { useState } from 'react';
import styled from 'styled-components';
import logo from '../assets/logo.png';

function initialState() {
  return { user: '', password: '' };
}


const LoginPage = () => { 

  const [values, setValues] = useState();

  function onChange(event) {`enter code here`
    const { value, name } = event.target;

    setValues({
      ...values,
      [name]: value
    });
  }

  return (
    <LoginCard>
      <LoginLogoWrapper>
        <img src={ logo } alt="logo"/>
      </LoginLogoWrapper>
      <Form>
        <p>Acesse sua conta</p>
        <input type="email" name="user" placeholder="E-mail" onChange={onChange} value={values.user}/>
        <input type="password" name="password" placeholder="Senha" onChange={onChange} value={values.password}/>
        <button>Entrar</button>
      </Form>
    </LoginCard>
  );
};


export default LoginPage;

As requested i have put the code in the question, i’m sorry i’m new to stack overflow and coding in general. I already tried putting the function initializing the values inside the constant but it just throws another error.

Answer

As I saw at first from your screenshot, that the useState({…}) don’t have appropriate properties. Try like this:

const [values, setValues] = useState({
    user: "",
    password: ""
})

For more details check out this article.

Advertisement

Answer