Question 74200 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Unable to render component onClick event – react – Reactjs

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;
Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    A couple of things.

    1. Return what you want to be rendered from your component. In this case return SignupCard from your component.
    2. 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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search