'Cannot convert undefined or null to object or not length

If you put a value in every input, it works normally. However, errors appear even if only one input is empty. nameValue.length, an error appears that you cannot work on the length. Object.values(nameValue).length, the error 'Cannot convert undefined or null to object' appears.

const [values, setValues] = useState({
    nameValue: '',
    numberValue: '',
    contentValue: '',
  });

  const { nameValue, numberValue, contentValue } = values;

  const handleNumber = e => {
    const { value, name } = e.target;

    setValues({
      ...values,
      [name]: value,
    });
  };
useEffect(() => {
    if (numberValue.length === 11) {
      setValues({
        numberValue: numberValue.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'),
      });
    } else if (numberValue.length === 13) {
      setValues({
        numberValue: numberValue
          .replace(/-/g, '')
          .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'),
      });
    }
  }, [numberValue]);
const handleSend = e => {
    e.preventDefault();
    //console.log(typeof stringify(nameValue) === 'undefined');

    const nameValueTrue =
      Object.values(nameValue).length > 4 ||
      Object.values(nameValue).length < 1 ||
      typeof nameValue !== 'string' ||
      typeof nameValue === 'undefined';

    const numberValueTrue =
      Object.values(numberValue).length < 13 ||
      Object.values(numberValue).length > 14;

    const contentValueTrue =
      typeof contentValue !== 'string' ||
      Object.values(contentValue).length < 2;

    const error = !e.target.value;

    if (nameValueTrue) {
      alert('이름을 확인해주세요.');
      console.log('name안');
    } else if (numberValueTrue) {
      console.log('number');
      alert('휴대폰번호를 확인해주세요.');
    } else if (contentValueTrue) {
      console.log('content');
      alert('내용을 확인해주세요.');
    } else {
      goto();
    }
  };
<ContentBox>
          <div>Name</div>
          <ContentInput
            name="nameValue"
            value={nameValue || undefined}
            //value={nameValue || ''}
            //value={nameValue}
            onChange={handleNumber}
          />
        </ContentBox>
        <ContentBox>
          <div>Phone Number</div>
          <ContentInput
            name="numberValue"
            value={numberValue || undefined}
            //value={numberValue || ''}
            //value={numberValue}
            onChange={handleNumber}
          />
        </ContentBox>
        <ContentBox>
          <div>Content</div>
          <ContentInput
            placeholder="내용 입력."
            name="contentValue"
            value={contentValue || undefined}
            //value={contentValue || ''}
            //value={contentValue}
            onChange={handleNumber}
          />
        </ContentBox>
        <Submit onClick={handleSend}>Send</Submit>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source