Unable to get props data from parent component

Question

I want to inherit the data 'users' in 'Myprofile' component from parent component 'Mypage' When I did Console.log(res.data) in Mypage, I was able to get object {data: {nickname:xxx, memberId:sss, img:dddd etc}}. but I can't use it in 'MyProfile'

here is 'Mypage' parent component

const MyPage = () => {
  const [memberId, setMemberId] = useRecoilState(memberIdState);

  const [users, setUsers] = useState("");

  useEffect(() => {
   
    InfoAPI(memberId).then((res) =>{
      console.log(res.data);
      setUsers(res.data);
      
    })
  },[]);

  return (
    <LayoutContainer>
     
        <div style={{ paddingTop: '10em', paddingBottom: '10em' }}>
          <Loading />
        </div>
  
        <>
          <MyInfo memberId={memberId} users={users} />
          <MyProfile memberId={memberId} users={users} />
        </>
    
    </LayoutContainer>
  );
};

export default MyPage;

here is 'MyProfile' component

const MyProfile = ({users}) => {
  const URL = process.env.REACT_APP_URL;
  const [isAbout, setIsAbout] = useState(false);
  const [isPost, setIsPost] = useState(false);


  useEffect(() => {
    if ((users.data.nickname) && (users.data.email)){
      setIsAbout(true);
      setIsPost(true);
    }
    else if ((!users.data.nickname) && (users.data.email)){
      setIsPost(true);
    }
    else if ((users.data.nickname) && (!users.data.email)){
      setIsAbout(true);
    }
      
    },[]);

 

  return (
    <Container>
      <LContent>
        <Stats>
          <div className="title">Stats</div>
          <StatContainer>
            <StatTop>
              <StatDiv>
                <StatNum>1</StatNum>
                <StatMsg>reputation</StatMsg>
              </StatDiv>

              <StatDiv>
                <StatNum>0</StatNum>
                <StatMsg>reached</StatMsg>
              </StatDiv>
            </StatTop>
            <StatBottom>
              <StatDiv>
                <StatNum>0</StatNum>
                <StatMsg>answers</StatMsg>
              </StatDiv>

              <StatDiv>
                <StatNum>0</StatNum>
                <StatMsg>questions</StatMsg>
              </StatDiv>
            </StatBottom>
          </StatContainer>
        </Stats>
      </LContent>
      <RContent>
        <div className="about-container">
          <div className="title">About</div>
          <div className="about-content">
            {isAbout ? (
             <div>{users.data.nickname}</div>
           
            ) : (
              <>
                <div className="about-txt">
                  Your about me section is currently blank. Would you
                  <br /> like to add one?
                  <Link className="about-link" to="/edit">
                    Edit profile
                  </Link>
                </div>
              </>
            )}
          </div>
        </div>

        <div className="posts-container">
          <div className="title">Posts</div>
          <div className="posts-content">
            {isPost ? (
              <div>{users.data.email}</div>
        
            ) : (
              <>
                <svg />
                <div className="posts-txt">
                  <p className="posts-txt-top">
                    Just getting started? Try answering a question!
                  </p>
                  Your most helpful questions, answers and tags will appear
                  here. Start by answering a question or selecting tags that
                  match topics you’re interested in.
                </div>
              </>
            )}
          </div>
        </div>
      </RContent>
    </Container>
  );
};

here is error message

Uncaught TypeError: Cannot destructure property 'users' of '_ref2' as it is undefined.

I tried to fix it like this bc my if statement might be wrong for test, but there's still an error...

const MyProfile = ({users}) => {
  const URL = process.env.REACT_APP_URL;
  const [isAbout, setIsAbout] = useState(false);
  const [isPost, setIsPost] = useState(false);


  useEffect(() => {
    
      setIsAbout(true);
      setIsPost(true);
    
    },[]);

error massage here

MyProfile.jsx:27 Uncaught TypeError: Cannot read properties of undefined (reading 'nickname')

Answer 1

It seems like the users is an object but you set the initial value as a string, Also it would be better to rename users to user because the plural noun gives a sense that it's an array.

const [user, setUser] = useState({ data: {} });