Render view on click Reactjs - html

Question

I have created a overlay element and I want it to appear when a certain input field is clicked. I'm new to react so it's not clear to me how I should do it.
This is the view that should appear
import React, { Component } from 'react';
import pro_pic from '../../Resources/img/Anon.jpg';
import menu_drop from '../../Resources/img/drop.png';
class QuestionOverlay extends Component {
render() {
return (
<div id="overlay">
</div>
)
}
}
export default QuestionOverlay;
The click event is here
render() {
function popup_ques(e) {
e.preventDefault();
alert("render overlay view");
}
return (
<div className="middle_div">
<input className='post_data_input' placeholder="Ask your question here" ref="postTxt"
onClick={popup_ques}/>
</div>
);
}
So when I click the input field, the overlay I have created should appear instead of the alert I have given.

Answer 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>
);
}