title: How do you change a button text depending on a condition on ReactJS?
body: <p>ReactJS newbie here. I'm trying to learn ReactJS conditional rendering. The plan is to change the button text from &quot;Hide Balance&quot; to &quot;Show Balance&quot; and vice versa upon button clicks. I have managed to change the state of the boolean but the button is not changing its text.
  What am I doing wrong?</p>
  <p><strong>Account-Balance.jsx</strong> - This is the child component</p>
  <pre><code>export default class ViewBalance extends Component{
      constructor(props){
          super(props);
      this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(){
      this.props.setPrivacy(this.props.setPrivacy);
  }
  
  render() {
      const buttonText = this.props.setPrivacy ? &quot;Hide Balance&quot; : &quot;Show Balance&quot;;
      //true: balance is shown
      //false: balance is hidden
  
      return (
          &lt;AccountBalDiv&gt;
              &lt;CurrentBal&gt;Current Balance&lt;/CurrentBal&gt;
                        //some code
              &lt;div&gt;
                &lt;button onClick={this.handleChange}&gt;{buttonText}&lt;/button&gt;
              &lt;/div&gt;
          &lt;/AccountBalDiv&gt;
      );
      }
  }
  </code></pre>
  <p><strong>App.js</strong> - This is the parent component</p>
  <pre><code>    class App extends React.Component {
          constructor(props){
          super(props);
  
      this.state= {
        balance: 10000,
        setPrivacy: true
      }
  
      this.setPrivacy = this.setPrivacy.bind(this);
    }
  
    setPrivacy(){
      
      this.setState(oldState =&gt; ({
        setPrivacy: !oldState.setPrivacy
      }));
  
      console.log(this.state.setPrivacy)
    }
  
    render(){
      return (
        &lt;AppDiv&gt;
          &lt;ViewBalance balance={this.state.balance}
                       setPrivacy={this.setPrivacy}/&gt;
        &lt;/AppDiv&gt;
         );
        }
       }
  
       export default App;
  </code></pre>