Question 172790 in Javascript Question posted in
A very good W3school tutorial can be found here.

x Can Javascript solve the problem of React icons showing object inside JSX?

When adding icons inside the js condition, the icon appears as an object only, and the icon does not appear

{!signUp ? `${(<FcGoogle />)}` + "Signin With Google": `${(<FcGoogle />)} SignUp With Google`}

enter image description here

Tags:

2

Answers


  1. 0

    You cannot put components inside a string since they are functions that do not return strings. You could either remove the “ around or (IMO) better:

    <button
  className="btn"
  type="submit"
  disabled={disabled}
  onClick={handleClick}
>
  <FcGoogle />
  {!signUp ? "Signin" : "Signup"} With Google
</button>
    Login or Signup to reply.
  2. 0

    If the icon we render doesn’t change depending on the value signUp; a cleaner approach to solve this challenge would be use a ternary inside the string and conditionally render the text like below:

    export function SignInOrSignUp({ signUp }) {
  return (
    <>
      <FcGoogle /> {`${signUp ? 'Signin' : 'Signup'} With Google`}
    </>
  )
}

    This has the added benefit of keeping our code DRY also.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search