In this code
<div class='wrapper'>
<div class='icon'>
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
</div>
</div>
whenever the user hovers over the 'icon' div, this code
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
should be replaced with this one
<p> Lorem ipsum </p>
I able to achieve changing styles but don't know how to replace elements. Please help me in this.
As with most things in React, you need a state. Something like:
constructor() {
super();
this.state = {isHovered: false};
}
This state needs to change anytime the user hovers in or out of the icon:
toggleHover() {
this.setState(prevState => ({isHovered: !prevState.isHovered}));
}
<div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
Then the logic for deciding what should be displayed, depending on that state:
{this.state.isHovered ?
<p> Lorem ipsum </p> :
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
}
You may want to have two separate methods, one for onMouseEnter and one for onMouseLeave, rather than just a shared method for both, like I did.
Oh, and you had a typo: You wrote class rather than className in a few places.
class App extends React.Component {
constructor() {
super();
this.state = {isHovered: false};
this.toggleHover = this.toggleHover.bind(this);
}
toggleHover() {
this.setState(prevState => ({isHovered: !prevState.isHovered}));
}
render() {
return (
<div className='wrapper'>
<div className='icon' onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>
{this.state.isHovered ?
<p> Lorem ipsum </p> :
<i className="fa fa-fw fa-globe" style={{ fontSize: '1.75em' }} />
}
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));.icon i {
display: block;
width: 32px;
height: 32px;
background: url('https://via.placeholder.com/32x32');
}<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="app"></div>In addition of @Chris's answer, If you would not like to create an event handler then you can create an inline arrow function that does the job.
onMouseEnter={()=> this.setState({isHovered: true})}
onMouseLeave={()=> this.setState({isHovered: false})}
This is just a shorthand you can go with.
You need to use state with onMouseEnter and onMouseLeave events
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isHover: false
};
this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
this.onMouseLeaveHandler = this.onMouseLeaveHandler.bind(this);
}
onMouseEnterHandler() {
this.setState({
isHover: true
});
}
onMouseLeaveHandler() {
this.setState({
isHover: false
});
}
render() {
return (
<div className="app">
<div className="icon" onMouseEnter={this.onMouseEnterHandler} onMouseLeave={this.onMouseLeaveHandler}>
{
this.state.isHover
? <div>hovered</div>
: <div>some text</div>
}
</div>
</div>
);
}
}
ReactDOM.render(
<App/>,
document.getElementById('app')
);<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="app"></div>This is working for me:
function MyComponent() {
const [myText, setMyText] = useState("Initial Text");
return (
<div
onMouseEnter={() => setMyText('New Text')}
onMouseLeave={() => setMyText('Whatever')}
>
{myText}
</div>
)
}
