I am having trouble on posting the error from data after submit incorrect mail and password. With debugger i'm seeing error text, but the page has error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

import { signInWithEmailAndPassword } from 'firebase/auth';
import React, {useState} from 'react';
import auth from '../../Firebase/firebase';

const SignIn = (errorCode) => {
    
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [errorText, setErrorText] = useState(false);

   

    const signIn = (e) => {
        e.preventDefault();
        signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
            console.log(userCredential);
        })
        .catch((error) => {
            let errorCode = error.code;
            let errorMessage = error.message;
            
            debugger;
            console.log(errorCode)
            
            return (
            setErrorText(true))
           
        })

    }
  return (
    <div>
        <form onSubmit={signIn}>
            <h1>Hey, Log In</h1>
            <input type='email' placeholder='enter email' value={email} onChange={(e) => setEmail(e.target.value)}></input>
            <input type='password' placeholder='enter pass' value={password} onChange={(e) => setPassword(e.target.value)}></input>
            
            { errorText ? <div>{errorCode}</div> : null 
   
            }
            
            <button type='submit'>Push to login</button>
            
        </form>
    </div>
  )
}

export default SignIn

I expected to image errorCode at the page signIn. Please, help me.

CodePudding user response：

Hey you can declare the error code in global scope using useState like below and can follow below thread for looking into this kind of errors https://stackabuse.com/bytes/fix-objects-are-not-valid-as-a-react-child-error-in-react/

 import React, { useState } from "react";

const SignIn = () => {
  const [errorCode, setErrorCode] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorText, setErrorText] = useState(false);
  
  

  const signIn = (e) => {
    e.preventDefault();
    setErrorCode('400')
    console.log(errorCode);
   setErrorText(true);
  };

  return (
    <div>
      <form onSubmit={signIn}>
        <h1>Hey, Log In</h1>
        <input
          placeholder="enter email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        ></input>
        <input
          type="password"
          placeholder="enter pass"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        ></input>

        {errorText ? <div>Error code {errorCode}</div> : null}

        <button type="submit">Push to login</button>
      </form>
    </div>
  );
};

export default SignIn;