Pass React property from React component to parent component onClick and simultaneously call a function to post component state values to Node back end.

I have a Button within a react component that has five values tied to the "Survey" component state.  Within the button I have a property called "triggerSurveyUpdate" that when the user clicks the button it triggers the property in parent component App so that I can change conditional rendering with the App component.  Also when the user clicks the button I want to call a function "handleClick" which in turn calls a function named "surveysIn". "surveyIn" in turn then does an axios post to post  my values from the 'Survey' component to my Node back end. The problem is that if I put both "this.props.triggerSurveyUpdate" and "this.handleClick.bind(this)" within the Button tag then the first "this.props.triggerSurveyUpdate" gets called but then "this.handleClick.bind(this) does not fire.  If I put both "this.props.triggerSurveyUpdate and "this.handleClick.bind(this)" within the handleClick(e) function then the "this.props.triggerSurveyUpdate" does not fire.  How can do I get react to fire both "this.props.triggerSurveyUpdate and "surveysIn" such that I am able to post values from the "Survey" component state to my back end and then also trigger the property "this.props.triggerSurveyUpdate" so that I can do my conditional rendering in my "App" component.  Below is my code for my Survey component.

import React, { Component } from 'react';
import {Slider} from 'primereact/components/slider/Slider';
import {Button} from 'primereact/components/button/Button';
import surveysIn from "./surveysin";

class Survey extends Component {
    constructor(props) {
        super(props);
        this.state = { val1: 50, rangeValues: [0, 100] };
        this.onChangeSlider1 = this.onChangeSlider1.bind(this);
        this.onChangeSlider2 = this.onChangeSlider2.bind(this);
        this.onChangeSlider3 = this.onChangeSlider3.bind(this);
        this.onChangeSlider4 = this.onChangeSlider4.bind(this);
        this.onChangeSlider5 = this.onChangeSlider5.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    onChangeSlider1(e) {
        this.setState({ val1: e.value });
    }
    onChangeSlider2(e) {

        this.setState({ val2: e.value });
    }

    onChangeSlider3(e) {
        this.setState({ val3: e.value });
    }

    onChangeSlider4(e) {
        this.setState({ val4: e.value });
    }

    onChangeSlider5(e) {
        this.setState({ val5: e.value });
    }

    handleClick(e) {
        console.log("Click happened " + this.state.val1);
        e.preventDefault();
        this.props.triggerSurveyUpdate;
        surveysIn(this.state.val1);
    
    }

   render() {
       return (
           <div> 
            <h2>Enter your confidence level below and click submit to access reports</h2>
            <h3> Confidence One Level {this.state.val1}</h3>
            <Slider style={{ width: '600px' }} onChange={this.onChangeSlider1} />
            <h3> Confidence Two Level {this.state.val2}</h3>
            <Slider style={{ width: '600px' }} onChange={this.onChangeSlider2} />
            <h3> Confidence Three Level {this.state.val3}</h3>
            <Slider style={{ width: '600px' }} onChange={this.onChangeSlider3} />
            <h3> Confidence Four Level {this.state.val4}</h3>
            <Slider style={{ width: '600px' }} onChange={this.onChangeSlider4} />
            <h3> Confidence Five Level {this.state.val5}</h3>
            <Slider style={{ width: '600px' }} onChange={this.onChangeSlider5} />
            <br></br>
            <Button label="Submit" icon="pi pi-check" iconPos="right" onClick= /*this.props.triggerSurveyUpdate*/
           {this.props.triggerSurveyUpdate}>{this.handleClick.bind(this)}</Button>
            </div>
       )
   } 
}
export default Survey

Open in new window

Mike MucklerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
Is there are specific reason you repeat yourself instead of passing a value or using a data-attribute?
Also why not use a submit handler on a form?
0
Mike MucklerAuthor Commented:
I changed handleClick(e) to the following and did my function call first passing the local component state to the surveysIn function where I do my back end post and then trigger the conditional rendering through a property in the parent component with properties:
handleClick(e) {
        console.log("Click happened " + this.state.val1);
        surveysIn(this.state.val1, this.state.val2, this.state.val3, this.state.val4, this.state.val5);
        (this.props.triggerSurveyUpdate(this.props.value));
    }

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike MucklerAuthor Commented:
Is there another better way?  The above way I did seems to work good.
0
Mikkel SandbergFront End DeveloperCommented:
Hi Mike,
Did you try just using the handleClick method in the onClick handler? Like this:
<Button (...other stuff) onClick={this.handleClick} />

Open in new window

And then your handleClick method could be:
handleClick(e) {
  e.preventDefault();
  this.props.triggerSurveyUpdate();
  surveysIn(this.state.val1);
}

Open in new window

Also, I noticed in your original code that in your handleClick method, you're not actually calling this.props.triggerSurveyUpdate(), you were just referencing it (notice the () at the end).
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Node.js

From novice to tech pro — start learning today.