asked on

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

Michel Plungjan

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?

ASKER CERTIFIED SOLUTION

Mike Muckler

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mike Muckler

ASKER

Is there another better way? The above way I did seems to work good.

Mikkel Sandberg

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).