My 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

Question

After the user registers, I want to show his email on another page. In the true case, I have it as I want but in the false case, it shows an error. I will put that error below. Please help me fix this

 **My activation page** import React from "react"; import "./auth.css"; const Activation = (props) => { const email = (props.location && props.location.state) || {}; return ( <> {email ? ( <div className="activation"> <i className="vjtal06 fas fa-check-circle"></i> <h2>Registration successful.</h2> <div className="abn5uhi"> <p>Thank you. We have send you email to {email}</p> <p> Pleace click the link in that message to activate your account. </p> </div> </div> ) : ( <div className="activation"> <i className="vjtal06 fas fa-check-circle"></i> <h2>Session Expired</h2> <div className="abn5uhi"> <p>Pleace try again.</p> </div> </div> )} </> ); }; export default Activation;

Please click here to show my error img

Answer 1

All you need to do is remove this || {}; || {}; part :)

Explaination: There is something in javascript called Truthy and Falsy values and this means what can be translated into true and false if you checked them, in your case {} is Truthy value, so, in case of empty email, it still gets converted as true boolean value

Answer 2

Your email always validates to true since the empty object from your OR statement is not falsy nor undefined.

If you want to keep the code like this you can check against the length of the object.

Object.keys(email).length !== 0;