0

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!

1 respuesta 1

1

Intenta definir bien os tipos de las funciones que pasas al onChange y al onSubmit... quizás no resuelva todo el problema, pero seguro te deja más cerca de la solución.

Te dejo unos ejemplos.

const handleChangeName : React.ChangeEventHandler = (e : 
React.ChangeEvent<HTMLInputElement>) : void  => {
    e.preventDefault()
    //console.log(e.target.value, 'handle name');
    setvalueName(e.target.value)
}

const handleSubmit: 
React.FormEventHandler<HTMLFormElement> = (
e: React.FormEvent<HTMLFormElement>
 ): void => {
e.preventDefault()
 // rest of  code
 }
1
  • Muchas gracias por tu comentario! Probare a implementarlo. el 27 jun. 2021 a las 16:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.