Unable to render component onClick event - react

Question

I am essentially to display a Login/Signup card when a user clicks on the sign up button of my website. However, the component I am trying to render on click is not showing up. Below is my code -

import "./homePage.css";
import signupCard from "../signupCard/signupCard"; // .jsx file
import { motion } from "framer-motion";

function Header() {
  return (
    <>
      <div className="header">
        <ul>
          <motion.li
            className="li__signup"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
            onClick={(e) => {
              e.preventDefault();
              <signupCard />; // **trying to render card here**
            }}
          >
            Sign Up
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            Contact
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            About
          </motion.li>
        </ul>
      </div>
      <img src="../assets/image.png" alt="placeholder" />
    </>
  );
}

export default Header;

devpolo · Accepted Answer · 2023-02-16T18:44:27.233

1

Every Component in react must be in the render and not in an event function.

Consider doing:

import { useState } from "react";
import "./homePage.css";
import signupCard from "../signupCard/signupCard"; // .jsx file
import { motion } from "framer-motion";

function Header() {
  const [isOpened, setIsOpened] = useState(false);

  return (
    <>
      {isOpened ? <signupCard /> : null} 
      <div className="header">
        <ul>
          <motion.li
            className="li__signup"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
            onClick={(e) => {
              e.preventDefault();
              setIsOpened(true)
            }}
          >
            Sign Up
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            Contact
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            About
          </motion.li>
        </ul>
      </div>
      <img src="../assets/image.png" alt="placeholder" />
    </>
  );
}

export default Header;

edited Feb 16 '23 at 18:44

answered Feb 16 '23 at 18:41

devpolo

2,487
3
12
28

I was thinking of doing something similar. But now won't my card close if a user just clicks on a random place on the card? How do I prevent that? – Harsh Darji Feb 16 '23 at 18:43
It's not gonna happened but you may consider handle the `setIsOpened(false)` to close it somewhere. – devpolo Feb 16 '23 at 18:46
Also, my card is still not rendered on click. I clicked on 'Go to Definition' in my editor to see if it knows what `````` is. It says 'No definition found for signupCard'. – Harsh Darji Feb 16 '23 at 18:52
are you sure about the `import signupCard from "../signupCard/signupCard";`? – devpolo Feb 16 '23 at 18:53
I have imported the component correctly. But it doesn't seem to recognise it when I use it. – Harsh Darji Feb 16 '23 at 18:55
Did you miss the capital `S` => `SignupCard` – devpolo Feb 16 '23 at 18:56
Nope. I have named it ```signupCard```. As a matter of fact, I auto-imported ```signupCard```. So I don't think there are any typos. – Harsh Darji Feb 16 '23 at 18:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/251929/discussion-between-harsh-darji-and-devpolo). – Harsh Darji Feb 16 '23 at 18:59

score 1 · Answer 2 · answered Feb 16 '23 at 19:03

A couple of things.

Return what you want to be rendered from your component. In this case return SignupCard from your component.
Use uppercase characters for react components. So SignupCard instead of signupCard (change it in the source file and the import). Refer to this.

import "./homePage.css";
import SignupCard from "../signupCard/signupCard"; // .jsx file
import { motion } from "framer-motion";
import { useState } from "react";

function Header() {
  const [opened, setOpened] = useState(false);
  return (
    <>
      { opened ? <SignUpCard> : null }
      <div className="header">
        <ul>
          <motion.li
            className="li__signup"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
            onClick={(e) => {
              e.preventDefault();
              setOpened(true);
            }}
          >
            Sign Up
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            Contact
          </motion.li>
          <motion.li
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.9 }}
            transition={{ type: "spring", stiffness: 400, damping: 70 }}
          >
            About
          </motion.li>
        </ul>
      </div>
      <img src="../assets/image.png" alt="placeholder" />
    </>
  );
}

export default Header;

Unable to render component onClick event - react

2 Answers2