Estaba desarrollando una App
en React
con Typescript
, en la que implemento Firebase
como servicio de Login
de usuarios.
El error que me surje es el siguiente, y seguramente es por desconocimiento del framework de React
, ya que se trata de un problema al definir el html
del Componente SignIn
:
Error:
Type '{ type: string; name: string; value: string; onChange: (e: any) => void; placeholder: string; label: string; }' is not assignable to type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.
Property 'type' does not exist on type 'IntrinsicAttributes & InputProps & { children?: ReactNode; }'.ts(2322)
El error hace mención al archivo SigIn.tsx
file, al intentar definir el html
del componente:
SignIn.tsx:
import React, { FC, useState, FormEvent, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import Input from '../UI/Input';
import Button from '../UI/Button';
import Message from '../UI/Message';
import { signin, setError } from '../../store/actions/authActions';
import { RootState } from '../../store';
const SignIn: FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const dispatch = useDispatch();
const { error } = useSelector((state: RootState) => state.auth);
useEffect(() => {
return () => {
if(error) {
dispatch(setError(''));
}
}
}, [error, dispatch]);
const submitHandler = (e: FormEvent) => {
e.preventDefault();
if(error) {
dispatch(setError(''));
}
setLoading(true);
dispatch(signin({ email, password }, () => setLoading(false)));
}
return(
<section className="section">
<div className="container">
<h2 className="has-text-centered is-size-2 mb-3">Sign In</h2>
<form className="form" onSubmit={submitHandler}>
{error && <Message type="danger" msg={error} />}
<Input
type="email" //Here is where error rise.
name="email"
value={email}
onChange={(e) => setEmail(e.currentTarget.value)}
placeholder="Email address"
label="Email address"
/>
<Input
type="password"` //Here is where error rise.
name="password"
value={password}
onChange={(e) => setPassword(e.currentTarget.value)}
placeholder="Password"
label="Password"
/>
<p><Link to="/forgot-password">Forgot password ?</Link> </p> // In this line rise the error too.
<Button text={loading ? "Loading..." : "Sign In"} className="is-primary is-fullwidth mt-5" disabled={loading} />
</form>
</div>
</section>
);
}
export default SignIn;
Como digo, el error se produce al definir los atributos de los Input
, y del Link
, y seguramente sea un problema con React
.
Si pueden ayudar, muchas gracias de ante mano!