React Native: Rendering Component on Button Click

Question

I have a list of components that I want to render when the user clicks a button. The screen is supposed to be a search screen where the user types in their query, and when they hit the search button a list of results is displayed. However, when I try to make a component render using the onPress, nothing happens. For this example I am just printing text instead of using map to print out components.

renderResults() {  
   return <Text> Doesn't get printed </Text>
  }

  render() {
    return (
      <View>
        <Button
          onPress={ this.renderResults.bind(this) } //use .bind(this) to access state in renderResults
          title="Search!"
          color="#841584" />
       </View>
      );
  }

You have to change the state of your component (or application) in the renderResults method. Now the renderResult method doen't trigger updating of state. If you'd like to change the state of component you have to call setState. — viktarpunko
– viktarpunko, Commented Jun 22, 2017 at 17:37

Ansal Ali · Accepted Answer · 2017-07-25 09:21:20Z

9

export default class App extends Component {
    state={
      isVisible:false
    }

    renderResults=() =>{ 
      this.setState({
        isVisible:!this.state.isVisible//toggles the visibilty of the text
      })
    } 

    render() { 
      return (
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          {this.state.isVisible?<Text> get printed </Text>:null}
          <Button onPress={ this.renderResults} 
            title="Search!" 
            color="#841584" /> 
      </View> 
      );
     }
}

Try this code.

and you can run the demo on link

edited Jul 25, 2017 at 9:21

answered Jun 22, 2017 at 17:48

Ansal Ali

1,6231 gold badge14 silver badges30 bronze badges

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

1 Comment

Ansal Ali Over a year ago

I dont understand whats wrong with this answer to downvote.

Max Millington · Accepted Answer · 2017-06-22 17:41:22Z

3

React doesn't know that it needs to rerender the view with this method. Instead, force a rerender by updating the local state. I would do something like state = {buttonPressed: false} in the constructor and then this.setState({ buttonPressed: true} in the onPress. Then just have a simple boolean in the render to either return the text or the button depending on whether or not the buttonPressed in the state is true or false

answered Jun 22, 2017 at 17:41

Max Millington

4,4935 gold badges30 silver badges34 bronze badges

Comments

digit · Accepted Answer · 2017-06-22 17:53:14Z

2

Simple eg. by @Max Millington answer. You can use Conditional rendering to check if state is true or false.

constructor () {
   super();
   this.state = {printText:false};
} 

showText = () => {
   this.setState({printText:true});
}

render() {
  return (
   <View>
    <Button
      onPress={() => this.showText() } 
      title="Search!"
      color="#841584" />
     {this.state.printText && <Text> Printed text... </Text> }
   </View>
  );
}

answered Jun 22, 2017 at 17:53

digit

4,5653 gold badges30 silver badges46 bronze badges

Collectives™ on Stack Overflow

React Native: Rendering Component on Button Click

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related