title: display a overlay when input is clicked in react
body: <p>I'm trying to display a overlay when a certain Input field is clicked. I'm doing this in react. How can I do this?</p>
  
  <p><strong>This is my code</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import cam from '../../Resources/img/cam.png';
  import SinglePost from '../../Components/Post/single_post';
  
  class Middle extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              posts: []
          }
      }
  
      render() {
  
          function popup_ques(e) {
              e.preventDefault();
              alert("now the overlay should appear");
          }
  
          return (
              &lt;div className="middle_div"&gt;
  
                  &lt;input className='post_data_input' placeholder="Ask your question here" ref="postTxt" onClick={popup_ques}/&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  export default Middle;
  </code></pre>
  
  <p>What is the approach I should take?</p>