CodStak Weekly Challenge #11: Mouse Tracker with Render Props

React Interview Question

Hey Coders,

Welcome to the 10th edition of our weekly newsletter! This newsletter is designed to provide you with real-world challenges to help you enhance your front-end skills and excel in interviews.
Today’s challenge is to create a React component that tracks a mouse but with render props. If you haven’t read about render props, they can be defined as follows:

Render props is a pattern in React where a component receives a function as a prop and calls it to render UI dynamically.

Here is the description of the challenge:

In this challenge, you will build a Mouse Tracker component using the render props pattern in React. The component will track the mouse's position within a defined area and display the coordinates dynamically using a custom rendering function.

Your tasks are:

Create a MouseTracker component that: Tracks the mouse's x and y position using useState. Updates the state on onMouseMove events. Renders its content dynamically using a render prop.

Use the MouseTracker component in an App component to display the mouse coordinates within the tracked area.

Acceptance Criteria: The MouseTracker component should accept a render prop that dynamically renders the mouse's position. The tracked area should be visually distinguishable (e.g., a bordered div). The App component should display the mouse's x and y coordinates inside the MouseTracker.

🔥🔥 👉 You can access the challenge here

That’s all for this week, please subscribe to the newsletter if you haven’t already so I can send you challenges each week.

Will meet next week.

If you have any challenges you want to add, please either send me via email or DM me on IG or X.

---