score:1

this is what i would do:

constructor(props) {
  super(props);

  this.state = {
    overlayvisible: false
  }
}

render() {
    function popup_ques(e) {
        e.preventdefault();

        this.setstate({
          overlayvisible: true
        });
    }

    return (
        <div classname="middle_div">
            <input 
                 classname='post_data_input' 
                 placeholder="ask your question here" 
                 ref="posttxt"
                 onclick={popup_ques}/>

            {this.state.overlayvisible && <questionoverlay />}
        </div>
    );
}

your function has to be pure, so, based on a state you get an ui render, if you want to insert something, you change your state, but your render function remains the same.

however that approach effectively constructs a new overlay every time you show it, if you want to keep the state perhaps it is better to keep the component but change it's rendering:

import react, { component } from 'react';

class questionoverlay extends component {
    render() {
      if(!this.props.visible) {
        return null
      }

      return (<div id="overlay"/>)
    }
}

export default questionoverlay;

and the container:

constructor(props) {
  super(props);

  this.state = {
    overlayvisible: false
  }
}

render() {
    function popup_ques(e) {
        e.preventdefault();

        this.setstate({
          overlayvisible: true
        });
    }

    return (
        <div classname="middle_div">
            <input 
                 classname='post_data_input' 
                 placeholder="ask your question here" 
                 ref="posttxt"
                 onclick={popup_ques}/>

            <questionoverlay visible={this.state.overlayvisible}/>
        </div>
    );
}

Related Query

More Query from same tag