I am using length because I need the length of state, but there is an error called Uncaught TypeError: Cannot read properties of undefined (reading 'length'). SetName and name are declared by the parent component, but they change every time they receive letters as input. I want to get a true value if there are more than one letter in the input, but what's wrong? I'd appreciate if you let me know

File:

import React, { useState } from 'react'
import styled from 'styled-components';
import geryO from '../../resources/images/img/greyO.png'

const InputWrap = styled.div`
  align-items: center;
  -webkit-appearance: none;
  background: rgb(250, 250, 250);
  border: 1px solid rgb(219, 219, 219);
  border-radius: 3px;
 
  .inputInput {
    font-size: 16px;
    background: rgb(250, 250, 250);
    border: 0;
    flex: 1 0 auto;
    margin: 0;
    outline: none;
    overflow: hidden;
    padding: 9px 0 7px 8px;
    text-overflow: ellipsis;
    color: rgb(38, 38, 38);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  .userIdCheckGreyO {
    display: ${props=>props.isFocus===true&&props.isString?'flex':'none'};
    align-items: center;
    border: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    flex-direction: row;
    font: inherit;
    font-size: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-right: 8px;
    position: relative;
    vertical-align: middle;
  }


`

function SignUpNameInpu({name, setName}) {

  //isfocused? 
  const [isFocus, setIsFocus] = useState(false);

  //change true/false if input is focused
  const inputFocus = () => {
    setIsFocus(false)
  }

  const inputNotFocus = () => {
    setIsFocus(true)
  }

  //check length of string
  const [isString, setIsString] = useState(false)
  
  //(maybe this function is wrong)
  const stringLengthCheck = (name) => {
    if(name.length>0) {
      setIsString(true)
    }
  }
  
  console.log('stringLength :', isString)

  return (
    <InputWrap isFocus={isFocus} isString={isString}>
      <label>
        <span>
          <input 
            onFocus={()=>{inputFocus(); stringLengthCheck();}} 
            onBlur={inputNotFocus} 
            className='inputInput' 
            value={name} 
            onChange={(e)=>{setName(e.target.value)}}>
          </input>
        </span>
      </label>
      <div className='userIdCheckGreyO'>
        <span>
          <img src={geryO} alt='greyO' />
        </span>
      </div>
    </InputWrap>
  )
}

export default SignUpNameInpu;

CodePudding user response：

You are calling stringLengthCheck function with no arguments in onFocus event but it expects one. Just call the function with provided argument like stringLengthCheck(name).

CodePudding user response：

You don't seem to be passing an argument into stringLengthCheck, so when it is called, name is undefined.

Try removing the name argument in the function declaration for stringLengthCheck, it seems to be losing reference to the name coming from the props.

CodePudding user response：

You are calling stringLengthCheck function with no arguments in onFocus.You need to pass one argument in stringLengthCheck function.