Pass variable from function to React return() function

Question

I'm trying to pass a variable from a function to my React return() function. I'm not sure what the best way to do this is:

class SaveOfferModal extends Component {

  toggleSuccess() {
    const { initialValues, formValues } = this.props;
    if (initialValues !== formValues) {
      const getChangedValues = diff(initialValues, formValues);
      const showChangedValues = JSON.stringify(getChangedValues, 0, 2);
      console.log(showChangedValues);
    }

    this.setState({
      success: !this.state.success
    });
  }

render() {
return ( 
        <Button
          color='success'
          onClick={this.toggleSuccess}
          disabled={isDisabled}
          className='saveOfferBtn'
        >
          Save Offer
        </Button>
)
}

Thanks! I'm trying to pass the getChangedValues variable to the return() function!

I think you can use state or props to do that when you are using React. Do as Romans do. — Max Peng
– Max Peng, Commented Nov 16, 2019 at 6:13
I don't know what is the exact thing that you want. In react way, you have three ways to passing value to render function: state, props, and by injecting variable from the outer scope. Hope this document can help you: reactjs.org/docs/… — Long Nguyen Duc
– Long Nguyen Duc, Commented Nov 16, 2019 at 6:22
Your question is not clear enough. What's the variable that you need to pass to return() function — Dilan Tharaka
– Dilan Tharaka, Commented Nov 16, 2019 at 7:04
@DilanTharaka I'm trying to pass the getChangedValues variable to the return() function — Alyssa
– Alyssa, Commented Nov 16, 2019 at 16:35

PragJh · Accepted Answer · 2019-11-16 06:37:06Z

1

You can do that using state. For example, if you have a count variable that you want to show in render

incrementCount() {
  this.setState((state) => {
    return {count: state.count + 1}
  });
}

handleSomething() {
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();
}
render()
{
return ( 
        <Segment> The updated value of count is {this.state.count} </Segment>
)
}

You could also inject a variable from outside by using props.

answered Nov 16, 2019 at 6:37

PragJh

411 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass variable from function to React return() function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related