how to write a onchange event for a returned component

Question

const addvariableSlider = [
  'Discount Rate',
  'Total Volume',
  'R&D'
]       
 class HelloMessage extends React.Component {
    dis(){
        return (
              < Range     
                value={this.state.discountRateRange}
                onChange={this.discountChange}
                onAfterChange={this.discountAfterChange}     
              />
            )
        }
 totVol(){
        return (
              < Range     
                value={this.state.totalVolRateRange}
                onChange={this.totalVolChange}
                onAfterChange={this.totalVolAfterChange}     
              />
            )
        }
onSliderVarClick = (e) => {
    if (e.value == "Discount Rate") {
      this.dis()
    }
if(e.value=="Total Volume"){
this.totVol();
}
  }
          render() {

            return (
              <div>
  <Dropdown options={addvariableSlider} onChange={this.onSliderVarClick} value="" placeholder="Add Variable" /><br />

              </div>
            );
          }
        }

whatever the functions i called based on dropdown value, how to show those returned components dynamically in render function? after showing in render i can be able to work on those onchange and onAfterChange events

Answer 1

Continuing the logic of @Harish Soni, this example simplifies and brings code closer to the working component:

class HelloMessage extends React.Component {
    constructor(){
        this.state= {
          discountRateRange = 'something'
        }
    }

    discountChange = () => {
        alert('discountChange called')
    }

    discountAfterChange = () => {
        alert('discountAfterChange called')
    }


    render() {
        return (
            <div>
                <Range
                  value={this.state.discountRateRange}
                  onChange={this.discountChange}
                  onAfterChange={this.discountAfterChange}
                />
            </div>
        );
    }
}

Answer 2

This the correct way to do it.

These points to follow:

• You should not create the function inside render.
• you need to create the functions as the class instances not the general ones.
• You need to create all the functions as arrow function to get rid of the binding thing.
• When you are returning something you need to call that function.

Then TRY THIS UPDATED ANSWER

class HelloMessage extends React.Component {

    discountChange = () => {
        alert('onChange called')
    }

    add = () => {
        return (< Range
            value={this.state.discountRateRange}
            onChange={this.discountChange}
            onAfterChange={this.discountAfterChange}
        />
        )
    }
    render() {
        return (
            <div>
                {this.add()}
            </div>
        );
    }
}