# Self-review: Implementing scroller position with render props - Advanced React

1. **Considering the** `MousePosition` **component receives a prop called** `render`**, which is a function, what are valid options of JSX returned from the component?**
    
    * ```javascript
        return render(<div>{mousePosition}</div>);
        ```
        
    * ```javascript
        return (
          <div>
            render({mousePosition})
          </div>
        );
        ```
        
    * ```javascript
        return render({ mousePosition });
        ```
        
2. **The** `PointMouseLogger` **component returns the below JSX.**
    
    ```xml
    <p>
     ({mousePosition.x}, {mousePosition.y})
    </p>
    ```
    
    **After incorporating the** `MousePosition` **component as part of the JSX returned by** `PointMouseLogger`**, what should be the new JSX that** `PointMouseLogger` **returns?**
    
    * ```javascript
        return(
          <MousePosition>
            {({ mousePosition }) => (
              <p>
                ({mousePosition.x}, {mousePosition.y})
              </p>
            )}
          </MousePosition>
        );
        ```
        
    * ```javascript
        return(
          <MousePosition>
            {({ mousePosition }) => (
              <p>
                ({mousePosition.x}, {mousePosition.y})
              </p>
            )}
          </MousePosition>
        );
        ```
        
    * ```javascript
        return(
          <MousePosition
            render={({ mousePosition }) => (
              <p>
                ({mousePosition.x}, {mousePosition.y})
              </p>
            )}
          />
        );
        ```
        
3. **The App component initially presents the below output structure**
    
    ```javascript
    function App() {
      return(
        <div className="App">
          <header className="Header">Little Lemon Restaurant 🍕</header>
          <PanelMouseLogger />
          <PointMouseLogger />
        </div>
      );
    }
    ```
    
    **After adding the MousePosition component into the mix, would you still have to perform any changes to the App component?**
    
    * Yes
        
    * <mark>No</mark>
        

---

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1726475168705/99f94a15-40cf-4f93-a46d-17614e02de63.png align="center")