Qtr No. 213, New Town Yehlanka Indore 454775
Consider the below code snippet:
class HoverTracker extends Component {
state = {
isHovered: false,
};
handleMouseEnter = () => {
this.setState({ isHovered: true });
};
handleMouseLeave = () => {
this.setState({ isHovered: false });
};
render() {
const { render } = this.props;
const { isHovered } = this.state;
return (
<div
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
{render(isHovered)}
</div>
);
}
}
class App extends Component {
render() {
return (
<HoverTracker
render={(isHovered) => (
<div>
<p>Hover over me to see magic happen!</p>
{isHovered && <p>Hey! You're hovering over me!</p>}
</div>
)}
/>
);
}
}
export default App;
what does the `render` prop in the `HoverTracker` component represent?
Note: Assume all imports are done.
A function that returns JSX content
The hover state of the `HoverTracker` component.
The CSS style to be applied when hovering.
A callback function for handling mouse events.
To get all Infosys Certified React Expert Exam questions Join Group https://bit.ly/infy_premium_group
We're passionate about offering best placement materials and courses!! A one stop place for Placement Materials. We daily post Offcampus updates and Placement Materials.
Qtr No. 213, New Town Yehlanka Indore 454775
admin@prepflix.in
