No function call - onclick doesn't work react

Question

I have two components. The first of them looks like this

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      change: false
    };

    this.handleSwitch = this.handleSwitch.bind(this);
  }

  handleSwitch = () => {
    const { change } = this.state;
    this.setState({ change: !change })
    console.log(this.state.change)
  }

  render() {
    const { change } = this.state;

    return (
      <>
        <UserProfilPanel handleSwitch={this.handleSwitch}/>
        {
          change ? <UserProfilGallery /> : <UserProfilContent />
        }
      </>
    );
  }
}

To the UserProfile Panel component, it passes the function which is to be responsible for changing the state.

const UserProfil = (handleSwitch) => {
  return (
    <Container>
      <div>
        <button onClick={() => handleSwitch}>
          gallery
        </button>
        <button onClick={() => handleSwitch}>
          info
        </button>
      </div>
    </Container>
  )
}

When I press some buttons, nothing happens. The console also does not appear an error.

How to fix this problem? I want to change content after clicking the button

You're not calling handleSwitch in your onClick handlers, you're just returning the function. {() => handleSwitch()} or {handleSwitch} is what you need. — Joe Clay
– Joe Clay, Commented Mar 31, 2019 at 12:53
It should beonClick={() => handleSwitch()} and remove this.handleSwitch = this.handleSwitch.bind(this); — Jibin Mathews
– Jibin Mathews, Commented Mar 31, 2019 at 12:54

charlietfl · Accepted Answer · 2019-03-31 12:58:19Z

4

First argument in UserProfil() is props. To destructure only a specific property of the props object you need to do:

const UserProfil = ({handleSwitch}) => {...

Then inside your onClick anonymous function you need to call handleSwitch()

<button onClick={() => handleSwitch()}>
                           //      ^^  call function

edited Mar 31, 2019 at 12:58

answered Mar 31, 2019 at 12:53

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

No function call - onclick doesn't work react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related