CODEWITHSUNDEEP
javascriptreactjsdom
user8891334
user8891334

Reputation: 171

(ReactJS) Function not passing to child component

I am trying to pass props and functions from a parent to a child component in React. However, when I try to call the function in the child component, I receive the error: "Uncaught TypeError: Cannot read property 'bind' of undefined".

This would suggest that the function created in the parent element is not being accessed by the child component. Am I missing a step in my code that would allow me to reference a parent component function from a child component?

I am defining states as props in my parent component, for use in conditional rendering in my child component. I am also defining functions in the parent component, which I am trying to call in my child component.

Provided below is my code:

Note: The flow is supposed to work as follows: Click Sign Up button > Call SignUpClick function > render "SignUp" component (based on the conditional rendering logic outlined in the child component)

The same flow concept would apply if someone clicked the Sign In button.

Parent Component

  export default class Parent extends Component{

  constructor(props) {
    super(props);

    this.state = {
      SignUpClicked: false,
      SignInClicked: false,
    };

    this.SignUpClick = this.SignUpClick.bind(this);
    this.SignInClick = this.SignInClick.bind(this);

  }

    SignUpClick() {
      this.setState({
        SignUpClicked: true,
      });
    }

    SignInClick() {
      this.setState({
        SignInClicked: true,
      });
    }

  render () {

    return (
      <div>
           <Child />
      </div>
    )
  }
}

Child Component

export default class Child extends Component {

  render () {

  if (this.props.SignUpClicked) {
    return(
      <SignUp />
    ) } else if (this.props.SignInClicked) {
    return (
      <SignIn />
    )
  } else {
      return (
      <div>
        <div>
            <Button onClick={this.SignUpClick.bind(this)}> Sign Up </Button>
         </div>
         <div>
           <Button onClick={this.SignInClick.bind(this)}>Sign In</Button>
         </div>
      </div>
          )
        }
  }
}

Upvotes: 0

Views: 871

Answers (2)

G4bri3l
G4bri3l

Reputation: 5146

If you think about it, where would the child component grab the references for those functions ? The parent needs to give the child access to those methods, and how does a parent pass data to a child, with props! In your case you are not passing any prop at all to the child, so here is how your parent render method should look like:

render () {
  return (
    <div>
      <Child
        signUpClicked={this.state.SignUpClicked}
        signInClicked={this.state.SignInClicked}
        onSignUpClick={this.onSignUpClick}
        onSignInClick={this.onSignInClick}
      />
    </div>
  );
}

This is how a parent communicates with a child passing down props that are now accessible with this.props. At this point your Child component render method would look like this:

render () {
  const {
    signUpClicked,
    signInClicked,
    onSignUpClick,
    onSignInClick,
  } = this.props;

  if (signUpClicked) {
    return(<SignUp />);
  } else if (signInClicked) {
    return (<SignIn />);
  } else {
    return (
      <div>
        <Button onClick={onSignUpClick}> Sign Up </Button>
        <Button onClick={onSignInClick}>Sign In</Button>
      </div>
    )
 }
}

I used destructuring to help with readability. Hope this helps!

Upvotes: 1

Pranava Sheoran
Pranava Sheoran

Reputation: 529

Change the render method in parent class to pass SignUpClick and SignInClick to child.

return (
  <div>
       <Child SignInClick={this.SignInClick} SignUpClick={this.SignUpClick}/>
  </div>
)

Also, in the child class, access the methods as this.props.SignUpClick and this.props.SignInClick

Upvotes: 2

Related Questions