Typescript : Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

TypeScript
1

I am working on the react with typescript check out the code below I have added js in category no typescript category available sorry for that

class LoginForm extends React.Component<LoginFormProps, LoginFormState> {

    state = {
        account : {username : '', password : ''}
    }

    username = React.createRef<HTMLInputElement>();

    handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        //submitting the form
    }

    handleChange = (e : React.ChangeEvent<HTMLInputElement>) => {
        const account = {...this.state.account};
     
        account[e.currentTarget.name] = e.currentTarget.value;
        this.setState({account});
    }

    render() {
        const {account} = this.state;
        return (
            <div>
                <h1>Login</h1>
                <form onSubmit={this.handleSubmit}>
                    <div className="form-group">
                        <label htmlFor="username">Username</label>
                        <input 
                            autoFocus
                            name='username'
                            value={account.username}
                            onChange={this.handleChange}
                            ref={this.username} 
                            id="username" 
                            type="text" 
                            className="form-control" />
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <input
                            onChange={this.handleChange}
                            name='password'
                            value={account.password}
                            id='password' 
                            type="text" 
                            className="form-control" />
                    </div>
                    <button className="btn btn-primary">Login</button>
                </form>
            </div>
        );
    }
}

export default LoginForm;

I am getting **Type Hint Error ** on line account[e.currentTarget.name] inside a handleChange method

Screenshot 2022-05-28 193616
Screenshot 2022-05-28 1936161282×653 44.8 KB

3 Likes
2

Hi,
I did very few with Typescript but I will give you my 50cents.

The account object has a property username but it is not a string whereas your <input> name attribute returns a string.

could you try modifying account so that

account : {
  username: '',
  password: ''
}

becomes

account : {
  'username': '',
  'password': ''
}

See if it works.

I think you’d like to keep the notation as is. Then you need to find how to convert it back.

Did not try it myself but check that question from SO.

Regards.

3

@UniqueNospaceShort thanks for the response and your time I did find the solution
first I need to create the interface for account on top of class LoginForm

interface Account {
    username : string,
    password : string,
}

// below line we are saying that name e.currentTarget.name either be username or password 
account[e.currentTarget.name as keyof  Account]
4

@UniqueNospaceShort can you please help me? I am badly stuck as course move on

I am badly stuck on form section
check out joiCommonComponent branch

5

Hi,
Can you be more specific about your problem?