How can I use the value that I received as axios as a value?-CodePudding

I took the API value from child component to axios and handed it over to parent component in the form of toParentUser. In parent component, the value is userInvalid and it can be checked well in console. But if I want to use the value as a variable in parent component, but I try to use it as a variable, the error userInvalid is not defined no-undef comes out. How do I use this value in parent component? I'd appreciate it if you let me know thanks

SignUpUserInput:

this is child component. I received the value by axios and handed userData.data.isSuccess over to parent component.

import React, { useEffect, useState } from 'react'
import styled from 'styled-components';
import axios from 'axios';

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;
  box-sizing: border-box;
`

function SignUpUserInput({userName,setUserName,toParentUser}) {



//validation check
useEffect (()=> {
  async function fetchData () {
    try{
      const userData = await axios({
        method : 'get',
        url : `https://cors-anywher.herokuapp.com/https://clone-instagram.shop:8080/users/checkid?id=${userName}`
      });

      toParentUser(userData.data.isSuccess)
    }

    catch(error) {
      alert(error);
    }
  }
  fetchData();
},[userName])
 
 
  const [isUserName, setIsUserName] = useState(true);
  const onCheckName = (e) => {

  }

  return (
    <InputWrap isUserName={isUserName}>
      <label className='inputLabel'>
        <input className='inputInput' value={userName} onChange={(e)=>{setUserName(e.target.value); onCheckName(e);}}/>
      </label>
    </InputWrap>
  )
}

export default SignUpUserInput;

SignUp.jsx :

this is parent component. I got value as userInvalid and want to use this value in this component

import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import SignUpLoginButton from '../components/SingUp/SignUpLoginButton';
import SignUpUserInput from '../components/SingUp/SignUpUserInput';

const SignUpWrap = styled.div`
  flex-direction: column;
  display: flex;
  position: relative;
  z-index: 0;
`

function SignUp() {

  const toParentUser = (userInvalid) => {
    console.log('성공', userInvalid)
  }

  // I want to use this value
  const useThis = userInvalid;

  const [userName, setUserName] = useState("");

  return (
    <SignUpWrap>
      <div className='signUpInputContent4'>
        <SignUpUserInput userName={userName} setUserName={setUserName} toParentUser={toParentUser}/>
      </div>
      <div className='signUpInputContent6'>
        {/* want to use value here */}
        <Link to='/birthday' style={{textDecoration : 'none' ,color: 'inherit', pointerEvents: userInvalid && 'none'}}>
          <div className='signUpInputLoginButton'>
            <SignUpLoginButton email={email} name={name} userName={userName} passWord={passWord}/>
          </div>
        </Link>  
      </div>                  
    </SignUpWrap>
  )
}

export default SignUp;

CodePudding user response：

you can not store userInvalid in useThis as userInvalid is out of scope so will be undefined so do this:

const [useThis,SetuseThis]=useState('');
 const toParentUser = (userInvalid) => {
    console.log('성공', userInvalid)
SetuseThis(userInvalid)
  }