javascript - Passing a value via props onPress - Stack Overflow

I know we can call the function like {this.props.onPress}, can we pass value using this callback too? Default object is passed but I want to pass a string value using this function. Is this possible, I'm posting my code to clear the situation.

   import Cbuttons from './../utils/CustomButtons' 
    class MainScreen extends Component {                                                 

      _onBtnClick = event => {
        console.log("Click on Button");
      }
       render() {
         return (
          <View style={customStyles.mainContainer}>
            <Cbuttons btnName="MainScreen" onPress={this._onBtnClick}/>
            <Cbuttons btnName="ScreenTwo" onPress={this._onBtnClick}/>
            <Cbuttons btnName="ScreenThree" onPress=
              {this._onBtnClick}/>
          </View>
        );   
    }
  }
   export default MainScreen;

while inCustom Buttons clsss

class MyButtons extends Component {
   constructor(props){
     super(props);
     this.state={btnName:this.props.btnName};
   }
  render(){
    return(
      <TouchableOpacity  onPress={this.props.onPress} >
        <Text style={yourStyles.buttonText}> {this.props.btnName}</Text>
      </TouchableOpacity>
    );
  }
}

export default MyButtons;

I want to return btnName back via this.props.onPress

I know we can call the function like {this.props.onPress}, can we pass value using this callback too? Default object is passed but I want to pass a string value using this function. Is this possible, I'm posting my code to clear the situation.

   import Cbuttons from './../utils/CustomButtons' 
    class MainScreen extends Component {                                                 

      _onBtnClick = event => {
        console.log("Click on Button");
      }
       render() {
         return (
          <View style={customStyles.mainContainer}>
            <Cbuttons btnName="MainScreen" onPress={this._onBtnClick}/>
            <Cbuttons btnName="ScreenTwo" onPress={this._onBtnClick}/>
            <Cbuttons btnName="ScreenThree" onPress=
              {this._onBtnClick}/>
          </View>
        );   
    }
  }
   export default MainScreen;

while inCustom Buttons clsss

class MyButtons extends Component {
   constructor(props){
     super(props);
     this.state={btnName:this.props.btnName};
   }
  render(){
    return(
      <TouchableOpacity  onPress={this.props.onPress} >
        <Text style={yourStyles.buttonText}> {this.props.btnName}</Text>
      </TouchableOpacity>
    );
  }
}

export default MyButtons;

I want to return btnName back via this.props.onPress

• javascript
• react-native
• react-props

Share Improve this question Follow asked Dec 24, 2017 at 16:47 ZubairZubair 94522 gold badges99 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

<Cbuttons btnName="MainScreen" onPress={ () => { this._onBtnClick(this.props.btnName)}/>

Turn that field into a function which calls the _onBtnClick function normally with a parameter.

Then you would reflect that in the _onBtnClick() method:

_onBtnClick = buttonName => {
        console.log(`Click on Button ${buttonName}`);
}

This solved my problem, Thanks @mcpolo

class MyButtons extends Component {
  render(){
    return(
      <TouchableOpacity  onPress={()=>{this.props.onPress(this.props.btnName)}} >
        <Text style={yourStyles.buttonText}> {this.props.btnName}</Text>
      </TouchableOpacity>
    );
  }
}