React, render dinamic child passing prop - reactjs

Question

I'm slowly getting introduced into advanced React and best practices for production apps. I want to know what is considered the "best practice" way of rendering a dinamic child passing props regarding maintainability, readability etc:
Here is the codeSandBox for more details
First method, render children as function passing the prop:
import { useState } from "react"
import "./Mouses.css"
export default function MouseChildren ({children}) {
const [mousePos, setMousePos] = useState(undefined)
function handleMouseMove(e) {
setMousePos({x: e.clientX, y: e.clientY})
}
/* this is bad because if more than one child is passed it will break */
return (
<div className="Mouse-container" onMouseMove={handleMouseMove}>
{children(mousePos)}
</div>
)
}
and then you call it this way:
<MouseChildren>
{position => <RandomDiv position={position} method="children as function method" />}
</MouseChildren>
Second method, render function as prop:
import { useState } from "react"
import "./Mouses.css"
export default function MouseRenderMethod ({render}) {
const [mousePos, setMousePos] = useState(undefined)
function handleMouseMove(e) {
setMousePos({x: e.clientX, y: e.clientY})
}
return (
<div className="Mouse-container" onMouseMove={handleMouseMove}>
{render(mousePos)}
</div>
)
}
and you call it like this:
<MouseRenderMethod render={position => <RandomDiv position={position} method="render as prop method:" />} />
and the third method is using React.Children:
import React, { useState } from "react"
import "./Mouses.css"
export default function MouseCreateComponent({children}) {
const [mousePos, setMousePos] = useState(undefined)
function handleMouseMove(e) {
setMousePos({x: e.clientX, y: e.clientY})
}
return (
<div className="Mouse-container" onMouseMove={handleMouseMove}>
{React.Children.map(React.Children.toArray(children), child => {
if (React.isValidElement(child)) return React.cloneElement(child, {position: mousePos}, null)
})}
</div>
)
}
and you call it like this:
<MouseCreateComponent>
<RandomDiv method="React.CloneElement method" />
</MouseCreateComponent>
I'm not sure which way is considered to be best over the others. If you from your experience can explain a bit

Answer 1

If you want to pass anything in your code without retyping it, you need to use useContext and the structure is:
One example with full-functionality which it may help you is:
const AppContext = React.createContext();
const AppProvider = ({ children }) => {
const [userData, setUserData]=useState('nothing here')
// any code you want to pass in the code
//e.g. a function
const randomFunction = ()=>{
//do something here
}
return (
<AppContext.Provider
value={{
userData,
setUserData,
randomFunction
}}
>
{children}
</AppContext.Provider>
);
};
export const useGlobalContext = () => {
return useContext(AppContext);
};
export { AppContext, AppProvider };
then all you have to do is to wrap all the components (children) you want, e.g. wrap <App /> so, more or less everything:
<AppProvider>
<App />
</AppProvider>
So now in this case you can use everything from your AppContext in all your code, you can pass more variables and functions if you want, and you import that by using:
import { useGlobalContext } from '/pathYouHaveIt';
function App() {
const {
userData,
setUserData,
randomFunction,
} = useGlobalContext();
// now you can use those like you have them set-up in the App()