React click handler passed to child component is not working

Question

I've tried to pass click handler to SignIn component, but it doesn't work for me. I get log and then page refreshes

Auth class:

class Auth extends Component {

login() {
    console.log('Clicked'); //only this method works
    fetch('/api/auth/signin', {
        method: 'POST',
        body: JSON.stringify(this.state),
        headers: {
            'Content-Type': 'application/json; charset=utf8'
        }
    }).then((response) => {
        if (response.status === 200) {
            this.props.history.push('/api/categories')
        }
    })
}

render() {
    return (
        <SignIn onCustomClick={this.login}/> //onClick handler
    )
}

SignIn component

export default function SignIn(props) {
    const {onCustomClick} = props; // props
      return (
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                className={classes.submit}
                onClick={onCustomClick} // onClick handler
              >)
    }

Shubham Khatri · Accepted Answer · 2020-05-14T07:18:54.783

1

You need to bind your login function to the class context. Write it as an arrow function to achieve that.

Also add e.preventDefault to prevent the default browser behaviour on form submit to refresh the page with submitted information

class Auth extends Component {

    login = (e) =>  { // Arrow function here
        e.preventDefault(); // prevent default browser behaviour to refresh
        fetch('/api/auth/signin', {
            method: 'POST',
            body: JSON.stringify(this.state),
            headers: {
                'Content-Type': 'application/json; charset=utf8'
            }
        }).then((response) => {
            if (response.status === 200) {
                this.props.history.push('/api/categories')
            }
        })
    }

    render() {
        return (
            <SignIn onCustomClick={this.login}/> //onClick handler
        )
    }

}

edited May 14 '20 at 07:18

answered May 14 '20 at 06:50

Shubham Khatri

270,417
55
406
400

Still refreshes after console output. Please check update – Vadim May 14 '20 at 06:53
Are you getting redirected to `/api/categories` page? – Nurul Sundarani May 14 '20 at 07:00
1

You need to add `e.preventDefault()` to prevent page refresh on submit – Shubham Khatri May 14 '20 at 07:01
@NurulSundarani i get redirect to ```/api/auth?email=email&password=password``` – Vadim May 14 '20 at 07:02
@Vadim Try e.preventDefault() – Shubham Khatri May 14 '20 at 07:04
Yes, as @ShubhamKhatri mentioned, can you try ```login = (e) => { e.preventDefault(); // Your rest of the code } ``` – Nurul Sundarani May 14 '20 at 07:06

score 0 · Answer 2 · answered May 14 '20 at 06:54

Your login function is not binded, you can use arrow functions or explicitly bind it in the constructor for it to work.

class Auth extends Component {
constructor(props){
  super(props);
  // here your function is binded
  this.login = this.login.bind(this);
}

login() {
    console.log('Clicked'); //only this method works
    fetch('/api/auth/signin', {
        method: 'POST',
        body: JSON.stringify(this.state),
        headers: {
            'Content-Type': 'application/json; charset=utf8'
        }
    }).then((response) => {
        if (response.status === 200) {
            this.props.history.push('/api/categories')
        }
    })
}

render() {
    return (
        <SignIn onCustomClick={this.login}/> //onClick handler
    )
}

React click handler passed to child component is not working

2 Answers2

Linked