简体   繁体   中英

Objects are not valid as a React child (found: object with keys {})

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.

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;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM