Input field in register form loses focus on every letter/keypress in ReactJS

Question

Okay so I'm making a register form for a website and using the handleChange function, I'm changing the input text of the regData state, but every time I type something in an input field, my input field loses focus after every keypress. so for example, If I wanted to write "cool" in the input field, I'm having to click on the input field, press c, then click on it again, then press o, one letter at a time.

  // Initializing all Errors and Navigate.
  const [RegData, setRegData] = React.useState({
    firstname: '',
    lastname: '',
    username: '',
    email: '',
    password: '',
  });


  

  function handleChange(event) {
    const { name, value} = event.target;

    setRegData((prevRegData) => {
      return {
        ...prevRegData,
        [name]: value,
      };
    });
  }




  return (
    <Cont>
      <Logo to="/">Aurum.</Logo>
      <Container>
        <RegContainer>
          <Title>REGISTER</Title>
        
          <Form>
            <Input
              type="text"
              name="firstname"
              value={RegData.firstname}
              placeholder="First Name"
              onChange={handleChange}
            />
            <Input
              type="text"
              name="lastname"
              value={RegData.lastname}
              placeholder="Last Name"
              onChange={handleChange}
            />
            <Input
              type="text"
              name="username"
              value={RegData.username}
              placeholder="Username"
              onChange={handleChange}
            />
            <Input
              type="email"
              name="email"
              value={RegData.email}
              placeholder="Email"
              onChange={handleChange}
            />
            <Input
              type="password"
              name="password"
              value={RegData.password}
              placeholder="Password"
              onChange={handleChange}
            />
            <Input
              type="text"
              name="confPassword"
              placeholder="Confirm Password"
              onChange={handleChange}
            />

            <SignUpBtn>SIGN UP</SignUpBtn>
          </Form>

https://stackblitz.com/edit/react-eb2auu?file=src%2FWebpages%2FRegister.js Here is the link to a hosted version of the site + full source code

I've looked at other forms and they follow the same method as mine, but I'm the only one getting this issue. I've tried to change functions and use callbacks but that resulted in the same focus loss after every keypress in the input fields.

Answer 1

move all your styled components at the top-level position

import React from 'react';
import styled from 'styled-components';
import { Link, useNavigate } from 'react-router-dom';
const Logo = styled(Link)`
  font-family: 'inter';      
  font-size: 35px;
        font-weight: bold;
        cursor: pointer;
        text-decoration: none;
        color: black;
        position: absolute;
        left: 2rem;
        top: 20px;

        &:hover{
          color: #1a1a1a;
        }
        
  `;

  const Cont = styled.div`
   position: relative;
  `;

  const Container = styled.div`
    font-family: 'inter';
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ), url('https://images.unsplash.com/photo-1615405988866-94a0a4b0eac1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;

    justify-content: center;
    align-items: center;
    background-position: center;
  `;

  const RegContainer = styled.div`
   background: white;
   border 2px solid rgba(1, 1, 1, 0.2);
   width: 600px;
   height: 600px;
   box-shadow: 2px 2px 50px;
   text-align: center;
 `;

  const Form = styled.form`
  margin-top: 0.5rem;
  margin-bottom: 1rem;

  @media (max-width: 1000px) {
   margin-top: 0    
  }

 `;

  const Input = styled.input`
  margin: 1rem;
  padding: 20px;

  @media (max-width: 1000px) {
    padding: 10px;  
    margin-bottom: 0 
  }
 `;

  const Title = styled.h1`
  margin-top: 3rem;
 `;

  const SignUpBtn = styled(Link)`
  display: block;
  margin: auto;
  margin-top: 0.5rem;
  padding: 10px 20px;
  width: 300px;
  height: 60px;
  border: none;
  cursor: pointer;
  background-color: rgba(54, 69, 79, 0.3);
  border-radius: 10px;
  font-weight: 400;
  font-size: 25px;
  text-decoration: none;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;

  &:hover{
    background-color: white;
    outline-style: solid;
    color: rgb(54, 69, 79);
  }

  @media (max-width: 1000px) {
   margin: 0
   padding: 10px;
   width: 150px;
   height: 30px;    
  }

 `;

  const Agreement = styled.span`
 margin-top: 1rem;
`;
export default function Register({ isLoggedIn }) {
  

  // Initializing all Errors and Navigate.
  const [RegData, setRegData] = React.useState({
    firstname: '',
    lastname: '',
    username: '',
    email: '',
    password: '',
  });

  function handleChange(event) {
    const { name, value } = event.target;

    setRegData((prevRegData) => {
      return {
        ...prevRegData,
        [name]: value,
      };
    });
  }

  return (
    <Cont>
      <Logo to="/">Aurum.</Logo>
      <Container>
        <RegContainer>
          <Title>REGISTER</Title>

          <Form>
            <Input
              type="text"
              name="firstname"
              value={RegData.firstname}
              placeholder="First Name"
              onChange={handleChange}
            />
            <Input
              type="text"
              name="lastname"
              value={RegData.lastname}
              placeholder="Last Name"
              onChange={handleChange}
            />
            <Input
              type="text"
              name="username"
              value={RegData.username}
              placeholder="Username"
              onChange={handleChange}
            />
            <Input
              type="email"
              name="email"
              value={RegData.email}
              placeholder="Email"
              onChange={handleChange}
            />
            <Input
              type="password"
              name="password"
              value={RegData.password}
              placeholder="Password"
              onChange={handleChange}
            />
            <Input
              type="text"
              name="confPassword"
              placeholder="Confirm Password"
              onChange={handleChange}
            />

            <SignUpBtn>SIGN UP</SignUpBtn>
          </Form>

          <Agreement>
            By Signing Up, I agree and consent with the <b>Privacy Policy</b>{' '}
            and all that it contains.
          </Agreement>
        </RegContainer>
      </Container>
    </Cont>
  );
}

Here what it should look like