Can not get value of input in reactJS Typescript

Question

I'm new to the Typescript and I'm getting error when I'm trying to console.log input field value. Any suggestions? Code :

class Register extends Component<{},userState> {

state = {
    userList : []
}

emailEl= createRef<HTMLInputElement>()
passwordEl= createRef<HTMLInputElement>()
confirmpasswordEl= createRef<HTMLInputElement>()

registerUser = () => {
    const {userList} = this.state
    const destructList = [...userList]
    // const newUser = [destructList, {
    //     email:this.emailEl.current.value,
    //     password:this.passwordEl.current.value
    //
    // }]
    console.log('--------destructList', this.emailEl.current);

}



render() {
    return (
        <div className="container">
            <h1 className={'registerH1'}>Registration</h1>
            <div className="email">
                <input ref={this.emailEl}  type={'email'} placeholder={'Enter your E-mail'} />
            </div>
            <div ref={this.passwordEl} className="password">
                <input type={'password'} placeholder={'Enter your password'} />
            </div>
            <div ref={this.confirmpasswordEl} className="confirmPassword">
                <input type={'password'} placeholder={'Confirm your password'} />
            </div>
            <div id={'buttons'} className="buttons">
                <Link to={'/login'} >
                    <button>Log In</button>
                </Link>
                <button  onClick={() => this.registerUser()}>Registration</button>
            </div>
        </div>
    )
}

and here is the error :

TS2531: Object is possibly 'null'

You should add all the relevant code like initial component state and the class component using registerUser — DevLoverUmar
– DevLoverUmar, Commented Jun 25, 2020 at 14:28
Well if it says that it might be null then you have to check if it's null or not before using it. — Guy Incognito
– Guy Incognito, Commented Jun 25, 2020 at 14:40

Alloys · Accepted Answer · 2020-06-25 14:38:35Z

1

You will need to use this.emailEl.current according to the react documentation. You might also need to guard against null values to make typescript happy.

import * as React from 'react'

class MyComponent extends React.Component {
    state = { userList: [] }
    emailEl = React.createRef<HTMLInputElement>()
    registerUser = () => {
        const { userList } = this.state
        if (this.emailEl.current) {
            console.log('--------', this.emailEl.current.value)
        }
    }
    render() {
        return <div></div>
    }
}

answered Jun 25, 2020 at 14:38

Alloys

1951 silver badge11 bronze badges

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

Comments

Dennis Vash · Accepted Answer · 2020-06-25 14:35:32Z

1

Its a type error, try:

emailEl= createRef<HTMLInputElement | null>();

// or
emailEl= createRef<HTMLInputElement>(null);
registerUser = () => {
    if (emailEl && emailEl.current) {
       // ts knows value not null
       this.emailEl.current.value;
    }
}

See the docs of React.createRef

edited Jun 25, 2020 at 14:35

answered Jun 25, 2020 at 14:26

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

1 Comment

Dennis Vash Over a year ago

Add minimal working example. Did you assign the ref? Check the docs.

Collectives™ on Stack Overflow

Can not get value of input in reactJS Typescript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related