Considering the MousePosition component receives a prop called render, which is a function, what are valid options of JSX returned from the component?

•   return render(<div>{mousePosition}</div>);
  

•   return (
      <div>
        render({mousePosition})
      </div>
    );
  

•   return render({ mousePosition });
  

The PointMouseLogger component returns the below JSX.

 <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?

•   return(
      <MousePosition>
        {({ mousePosition }) => (
          <p>
            ({mousePosition.x}, {mousePosition.y})
          </p>
        )}
      </MousePosition>
    );
  

•   return(
      <MousePosition>
        {({ mousePosition }) => (
          <p>
            ({mousePosition.x}, {mousePosition.y})
          </p>
        )}
      </MousePosition>
    );
  

•   return(
      <MousePosition
        render={({ mousePosition }) => (
          <p>
            ({mousePosition.x}, {mousePosition.y})
          </p>
        )}
      />
    );
  

The App component initially presents the below output structure

 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

• No