How do I execute a function passed as props between components in React?

Question

I'm in troubble. When I was creating the logout function using React , a problem occurred.

My "Auth" component send info in state and function to "AuthMenu" component.

But, the logout function in this code, <Btn onClick={logout}>Logout</Btn> , is not working.

When I checked the props in "AuthMenu" , console.log(logout); showed the function's code well. But, not working..

Am I writing the wrong code?

.

Auth.js

import React, { Component } from 'react'
import { GetUser } from '../../controllers/auth'

class Auth extends Component {
    state = {
        info: {
            id: '',
            name: '',
            img: '/icons/user.png',
        },
    }

    handleSetAuth(data) {
        this.setState({
            info: {
                id: data.user_id,
                name: data.user_nickname,
                img: '/icons/user.png', 
            }
        });
    }

    handleDeleteAuth() {
        console.log("Logout Successful!");
        this.setState({
            info: {
                id: '',
                name: '',
                img: '/icons/user.png',
            }
        });
    }

    componentDidMount() {
        if (localStorage.getItem('tk') !== null){
            GetUser((data)=> {
                if (this.state.info !== data)
                this.handleSetAuth(data);
            });
        }
    }

    render() {
        return (
          <AuthMenu info={this.state.info} logout={this.handleDeleteAuth}></AuthMenu>
        );
    }
}

export default Auth

AuthMenu.js

import React from 'react'
import styled from 'styled-components'

...

const Btn = styled.button`
    position: relative;
    display: inline-block;
    float: right;
    width: 100px;
    height: 30px;
    font-size: 0.8rem;
    line-height: 30px;
    margin: 15px 0 15px auto;
    border-radius: 4px;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
    transition: .2s ${transition};
    ${noselect}

    &:hover,
    &:active {
        background-color: ${palette.gray8};
        color: white;
    }

    ${media.small} {
        width: 80px;
    }
`;

...

const AuthMenu = ({info, logout})=> {
    const token = localStorage.getItem('tk');
    if (token === null) {
        return (
          <Container>
            <IconImg src={info.img} alt="User" />
            <ContentWrap>
              <Btn>Login</Btn>
            </ContentWrap>
          </Container>
        )
    } else {
        return (
          <Container>
            <IconImg src={info.img} alt="User" />
            <ContentWrap>
              <Name>{info.name}</Name>
              <Btn onClick={logout}>Logout</Btn>
            </ContentWrap>
          </Container>
        );
    }
}

export default AuthMenu

Answer 1

your handleDeleteAuth is not binded to the component. please add logout={this.handleDeleteAuth.bind(this} or change it to be arrow function:

    const handleDeleteAuth = () => {
        console.log("Logout Successful!");
        this.setState({
            info: {
                id: '',
                name: '',
                img: '/icons/user.png',
            }
        });
    }

Answer 2

Is your onClick working properly, just ignoring the prop, sometimes clicks don't work on certain components, you can try this

              <Btn onClick={() => {console.log("clicked");
logout()}}>Logout</Btn>

Answer 3

In my code, is just styled-component.

Is this the cause of the unwanted action?

import styled from 'styled-components'

const Btn = styled.button`
    position: relative;
    display: inline-block;
    float: right;
    width: 100px;
    height: 30px;
    font-size: 0.8rem;
    line-height: 30px;
    margin: 15px 0 15px auto;
    border-radius: 4px;
    border: 1px solid #eee;
    text-align: center;
    cursor: pointer;
    transition: .2s ${transition};
    ${noselect}

    &:hover,
    &:active {
        background-color: ${palette.gray8};
        color: white;
    }

    ${media.small} {
        width: 80px;
    }
`;

Answer 4

My Problem is solved!

The cause of error is event.stopImmediatePropagation(); .

Bug's Scenario is that.

1. Click Logout Button. (Logout Buttton is included by Memu component)
2. Executed event of Menu compoennt. (Menu component is modal included by body.)
3. stoped event propagation.
4. Logout button can not work.

I have had this error for over 6 hours.This is just my mistake!!!