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>
);
}
Source: stackoverflow.com
Related Query
- Render view on click Reactjs
- How to render element on click of button: ReactJS
- How to render a component in a different page when click on a link in a table row in ReactJs
- How to render DIV element with a button click on ReactJs
- ReactJS - Does render get called any time "setState" is called?
- ReactJS render string with non-breaking spaces
- How to get input text value on click in ReactJS
- How to detect Click + [Shift, Ctrl, Alt] in reactjs click event?
- Function inside render and class in reactjs
- Execute javascript after reactjs render method has completed
- Pass argument to reactjs click handler
- Datatables.net with ReactJS, render a ReactJS component in a column
- Double click and click on ReactJS Component
- ReactJS - render called, but DOM not updated
- Reactjs How to insert react component into string and then render
- Reactjs - Adding ref to input in dynamic element render
- how to add row to a table using ReactJS on button click
- ReactJS how to render a component only when scroll down and reach it on the page?
- ReactJS - Need to click twice to set State and run function
- Reactjs Warning: input is a void element tag and must not have `children` or use `props.dangerouslySetInnerHTML`. Check the render method of null
- Why I am not able to render my ReactJS application using PhantomJS 2.1.1?
- Reactjs Render component dynamically based on a JSON config
- Render a component from outside ReactJS
- Non blocking render in ReactJS
- Render multiple items on reactjs component
- Laravel 5.5 render a React component in a blade view with data from the controller
- How to select text to copy without triggering click event in reactjs
- Reactjs : Append instead of replacing with render method
- How to call internal API from Rails view (for ReactJS prerender purpose)?
- Typescript + Reactjs - Imported svg does not render
More Query from same tag
- How to zoom in and zoom out on canvas using button in konvajs react
- Show push message in chrome
- ReactJS - TypeError: setPage is not a function
- JS error when executing electron app with native module on other computer
- import syntax not working with webpack
- Functions inside and outside render()
- How to stop propagation on Link elements from React-Router-Dom?
- How do I make a api call with functional components?
- useRef hook for dynamic "onOutsideClick"?
- React is not rendering my javascript file
- How do I effectively npm link when using bit.dev?
- Cannot wrap react-autocomplete element in react-redux-form control
- How to filter items using function in React
- PDF is blank when opened
- How to edit a form when it is loaded with values?
- Default value for prop
- How to change component order while keeping state?
- selecting a particular index from array of objects
- State not Updating on React from
- Pass props to all of its children
- What is the actual difference between using an inline-style and using a css-in-js library like styled components in React?
- Passing props on a button? Is it possible?
- Animation using react-spring interpolate function not working
- Passing ref from child to parent to anothe child in React
- Material dialog showing despite display="none"
- How to avoid "act" warnings in a integration tests with React Testing Library
- ReactJs carousel - how to force items to snap after a swipe?
- React input[type=date] component does not work properly
- React re-render parent from child component not working
- React - How to change className by index?