Question 192446 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Usestate has initial value of [Object, object]

The value of use State when put into the input value comes out to [Object, object] but in dev tools, it is shown empty.

 import { useState } from 'react'
import {Link} from 'react-router-dom'

function Login() {

  const [input, setInput] = useState({
    email: ' ',
    password: ' '
  })
 
  return (
    <>
    <form className="form-group">
      <div className="input-group">
        <label htmlFor="email">Email</label>
        <input type="text" id= 'email' name = 'email' className="form-input" value={input} />
      </div>
      <div className="input-group">
        <label htmlFor="password">Password</label>
        <input type="text" id='password' name='password' className="form-input" value={input}/>
      </div>
      <p>Don't have an Account? <Link>SignUp</Link> </p>
        <button className='btn'>LogIn</button>
    </form>
</>
  )
}

export default Login

I cant even use any function.

Tags:

2

Answers


  1. 0

    The value of use State when put into the input value comes out to [Object, object]

    This is because you need to access the object correctly. Instead of value={input}, you need to use value={input.email}, and similarly for password value={input.password}

    <input type="text" id= 'email' name = 'email' className="form-input" value={input.email} />

    useState() sets the default state, and you have specified the default state as an empty string ”, that’s the reason the initial value will always be empty. You can assign something to check like

    const [input, setInput] = useState({
    email: 'test_email',
    password: '******'
})
    Login or Signup to reply.
  2. 0

    For getting the value of set as default in the input field you must call it by its key, not the whole object. Change value = {input} to value = {input.email} and value={input.password}.

    The fields will not update when you will try type inside the input fields, you would need to specify onChange={someEventHandleFunction} where someEventHandleFunction will map the values to the provided keys.

    Alternatively, you can also use two different useState() to handle email and password separately.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search