CODEWITHSUNDEEP
javascriptreactjsfunctionparent-child
user74843
user74843

Reputation: 701

handleClick function not working on parent component?

I have a react parent component, that renders a list of QuestionCard components, using the map function. I'm trying to place an onClick function inside each QuestionCard component (I want this function to be inside the parent component, and not the QuestionCard component code), but it's not working (I'm not getting a console log of 'working'). How could I solve this, and why is this happening in the first place?

Here is the code for the parent component: 

class QuestionList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            counter: 0,
            scorekeeper: 0
        }

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

    handleClick() {
        console.log('working')
    }

    render() {
        var createQuestionsList = this.props.questions.map((question, i) => {
            return <QuestionCard 
                    onClick={this.handleClick}
                    key={i} 
                    question={question.question}
                    choice1={question.choice1}
                    choice2={question.choice2}
                    choice3={question.choice3}
                    choice4={question.choice4}
                    answer={question.answer}
                   />
        });
        return (
            <div>
                {createQuestionsList}
                <button>submit answers</button>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        questions: state.questions
    };
}

export default connect(mapStateToProps)(QuestionList);

and here is the code for the child component: 

export default class QuestionCard extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            hideDiv: false
        }

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

    handleClick(choice) {
        this.setState(prevState => ({hideDiv: !prevState.hideDiv});
    }

    render() {
        return (
            <div style={{margin: '20px', display: this.state.hideDiv ? 'none' : 'block'}}>
                <div>
                    {this.props.question}
                </div>

                <div style={{
                        margin: '20px', 
                        width: '500px', 
                        display: 'flex', 
                        justifyContent: 'space-around',
                        display: this.state.hideDiv ? 'none' : 'block'
                      }}>
                    <div onClick={() => this.handleClick(this.props.choice1)}>
                        {this.props.choice1}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice2)}>
                        {this.props.choice2}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice3)}>
                        {this.props.choice3}
                    </div>
                    <div onClick={() => this.handleClick(this.props.choice4)}>
                        {this.props.choice4}
                    </div>
                </div>
            </div>
        );
    }
}

Upvotes: 3

Views: 955

Answers (3)

Elumalai Kaliyaperumal
Elumalai Kaliyaperumal

Reputation: 1520

In your QuestionList you passed onClick prop to QuestionCard. In order to get it to work use this.props.onClick in QuestionCard component. Then handleClick in QuestionList component will be called.

handleClick(choice) {
    this.setState(prevState => ({hideDiv: !prevState.hideDiv});
    this.props.onClick();
}

Upvotes: 0

Galupuf
Galupuf

Reputation: 2957

In QuestionCard, you're not calling the handleClick function that you are passing in as props from the parent. this.props.handleClick will call your parent method

handleClick(choice) {
  this.setState(prevState => ({hideDiv: !prevState.hideDiv});
  this.props.handleClick();
}

Upvotes: 0

Danny Delott
Danny Delott

Reputation: 7008

In your QuestionCard component, you never call the click handler you passed as props.

You need to call the this.props.handleClick to trigger the parent's onClick handler.

 handleClick(choice) {
     this.setState(prevState => ({hideDiv: !prevState.hideDiv});
     this.props.handleClick();
 }

Upvotes: 2

Related Questions