score:3
Accepted answer
you don't. please avoid using jquery within react since this is a bad practice.
react is all about components which you can easily achieve the very same result:
class collapsibleitem extends react.component {
constructor(props) {
super(props)
this.state = {
showcontent: false,
}
this.togglehover = this.togglehover.bind(this)
}
togglehover() {
this.setstate({
showcontent: !this.state.showcontent,
})
}
render() {
const { showcontent } = this.state
return (
<li
onmouseover={this.togglehover}
onmouseout={this.togglehover}
>
{this.props.name}
{showcontent && this.props.children}
</li>
)
}
}
const app = () =>
<div>
<ul>
<collapsibleitem name="nav 1">
<ul>
<li>sub nav 1</li>
<li>sub nav 2</li>
<li>sub nav 3</li>
</ul>
</collapsibleitem>
<collapsibleitem name="nav 2">
<ul>
<li>sub nav 4</li>
<li>sub nav 5</li>
<li>sub nav 6</li>
</ul>
</collapsibleitem>
</ul>
</div>
reactdom.render(
<app />,
document.getelementbyid('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
score:0
please avoid to use jquery or even reactjs when you can do it with two lines of css ;)
#menu ul { display: none; }
#menu li:hover ul { display: block; }
<ul id="menu">
<li>
<a href="#">nav 1</a>
<ul>
<li><a href="#">sub nav 1</a></li>
<li><a href="#">sub nav 2</a></li>
<li><a href="#">sub nav 3</a></li>
</ul>
</li>
<li>
<a href="#">nav 2</a>
<ul>
<li><a href="#">sub nav a</a></li>
<li><a href="#">sub nav b</a></li>
<li><a href="#">sub nav c</a></li>
</ul>
</li>
</ul>
Source: stackoverflow.com
Related Query
- React - How to track useRef children change
- How can I use setInterval() to automatically change slides on this React Spring project
- How to improve React performance when change element position with a lots children element
- How to update a useState which has an array, inside this array I have objects this objects will update when the input value will change in react js
- How do I change the Heroes array, to the res array? I am using the react useState hook. This has worked on previous projects but not here
- Is this the correct way to show data in React from a fetch request, if not how do I change JSX being rendered to a component?
- How can I change the position of this React component to fixed?
- React - How to let this functional component change div styles?
- how i can change this code to functional component in react
- How do i change this react router v5 code that uses props to v6
- How to change css in react in this example?
- How to use children with React Stateless Functional Component in TypeScript?
- How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
- How to fetch the new data in response to React Router change with Redux?
- React - how to capture only parent's onClick event and not children
- How to change props to state in React Hooks?
- How to change background color of react native button
- How can I test a change handler for a file-type input in React using Jest/Enzyme?
- How to check how many React children have a certain prop?
- How to add style to React Element if it's created this way?
- How to change React context programmatically?
- How to change checkbox in react correctly?
- ReactJS - How to change style and class of react component?
- How do I get rid of react error warnings telling me to change svg attributes to camel case?
- How do you change the Stepper color on React Material UI?
- Suddenly React cannot execute the 'create-react-app' command. Why is this happening and how can I solve it?
- How to change text Value upon Button press in React Native?
- How to change multiple properties of a state in react (at the same time)?
- How to debug this error: Uncaught (in promise) Error: Objects are not valid as a React child
- How to change outline color of Material UI React input component?
More Query from same tag
- Get method is being called infinitely
- Updating component data in React
- CSS file won't affect output?
- Props changes arenot reflected on component UI although the new state is shown in console in React/Redux
- Reactjs - Error: Objects are not valid as a React child (found: object with keys {type, data})
- Is it possible to combine 'px' and 'vh' into the height of 1 component in react js
- What approach can I use to wait for all child callbacks to complete?
- React Router base URL issue and link tag issue
- How to get refs from another component in React JS
- Ag-grid plain JS cell renderer in React
- CSS style is not applying to button in React component
- How to access async function from Redux Action passed into Redux Thunk?
- Webpack with Babel gives uncaught referenceError: require is not defined
- Render multiple inputs React
- Can I use window.localStorage in my React application?
- When should I use getInitialState in a React component
- How to call a child method on parent events with react?
- How to redirect to requested URL after login (React)
- Toggle Class in React
- Jest - Object is being re-used across tests
- How to map over an array in JS
- Reusable child components with mobx store, should I reference the parent store to the child?
- Fetching data in useEffect with an array as dependency should only be called on new elements
- TypeError: Cannot destructure property 'name' of 'item' as it is undefined
- Multiple calls with dependencies redux-thunk
- When should I be using icepick.merge over lodash.merge
- Within mapStateToProps, how to obtain a react-router param?
- React BrowserRouter not rendering when nabber link is clicked
- How to dynamically show data in a pie chart using Reactjs and D3js
- Unexpected unit "ms" unit-allowed-list, react scss