score:1
does this somehow affect reactdom render?
not really. it react only concerns itself with dom updates.
if the element it renders inside is display: none
then the react rendering process will generate the dom inside that element.
then, subsequent to the react rendering, the browser will convert the dom to something rendered on screen (which will be nothing because the container is display: none
).
score:1
if you set the visibility
to hidden
, hovering over the invisible component will not trigger the :hover
styles to take effect.
what is odd is that if you inspect element and toggle the :hidden
styles then it will properly show up.
const hovercountdown = () => (
<span>countdown</span>
);
//document.addeventlistener('domcontentloaded', () => {
reactdom.render(
<hovercountdown />,
document.getelementbyid('hover-countdown')
);
//});
.wrapper {
background: #efe;
}
#hover-countdown {
visibility: hidden; /* will render fine if removed */
}
#hover-countdown:hover {
visibility: visible;
color: #040;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div class="wrapper">
<div id="hover-countdown"></div>
</div>
Source: stackoverflow.com
Related Query
- Can you render react component to div with display none?
- How to 1). put a div , 2). render a component without Route inside <Routes> with React Router in v6 React?
- How can you render a react component using dynamic name?
- With React-Router, can you set an "outer" component to render at every route?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- Jest with React - How do you render an entire component and test it?
- I'm using react-slick, how can I export a React Component as a single element but remove the parent div on render
- how can i render a component with condition in path in react router?
- how can i render a component with an API call with props react js
- Can you dynamically render pure HTML and a custom component in one React component
- How can I display nested component with React router?
- Can you force a React component to rerender without calling setState?
- Functions are not valid as a React child. This may happen if you return a Component instead of from render
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- Can you early return with React hooks?
- Can you pass down state to child components with React Hooks?
- How do you mock a react component with Jest that has props?
- Can you track background geolocation with React Native?
- How can I use React with Google Places API, to display place markers on a Google map?
- JEST + React Testing Library: should I render my component with a beforeAll before tests?
- How can I search for a component with specific key in React Developer Tools?
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- Laravel 5.5 render a React component in a blade view with data from the controller
- onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component
- In Webpack 4, can we dynamically generate page chunk with import() token so we can turn a react component into a react-loadable one?
- Multiple times render in react functional component with hooks
- Display Animated Value in React Native Render Text Component
- Why is my React component render called twice, once without data and then later with data, but too late exception?
- How can you trigger a rerender of a React js component every minute?
- React - Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render
More Query from same tag
- React not rendering array after fetching data
- Firebase and ReactJS - Authentication Using Local Storage
- onKeyDown gets triggered everywhere instead of only on one page
- Remove entire object from a json array javascript
- Cannot import scss module styles the same way with Storybook and Gatsby
- Slug that isn't whole file name in Next.js?
- Using axios.post, response.data return html instead of data [Nodejs, React]
- TinyMCE editor and Base64
- Falling into an infinite for loop in react when I try to loop over a string
- Next Js getStaticProps getting lost
- How to pass url params to React app that's inside a html iframe
- Adding text into a text input onKeyPress react.js
- how to capture tab key press in react component?
- How to properly write a wrapper for a React component?
- Another way to clone a picture & image in a larger view
- Getting Error regarding :Cannot read property 'length' of undefined
- Fetching from Redux-Toolkit store returns undefined
- How to integrate Treant.js in a React projet
- I want to style a particular square component.
- Build once and deploy build file in multiple environments with minimal changes React and Webpack
- pushing different ids to array and getting an array if all id's are undefined
- TypeScript type for MapboxGLjs React ref hook
- How to preload i18n in advance before page load in react?
- Cannot read property 'target'
- how to get javascript Current Date
- Test loading of image in Cypress
- why setState does'nt change the "editing" key to true?
- Type of an event in TypeScript in React
- React checkbox doesn't keep toggled (think is in infinite loop)
- What are refs in React?