在仅功能组件中设置 React Context

Question

My goal is very simple. I am just looking to set my react context from within a reusable function-only (stateless?) react component.

When this reusable function gets called it will set the context (state inside) to values i provide. The problem is of course you can't import react inside a function-only component and hence I cannot set the context throughout my app.

There's nothing really to show its a simple problem.

But just in case:

<button onCLick={() => PlaySong()}></button>

export function PlaySong() {
  const {currentSong, setCurrentSong} = useContext(StoreContext) //cannot call useContext in this component
}

If i use a regular react component, i cannot call this function onClick:

export default function PlaySong() {
  const {currentSong, setCurrentSong} = useContext(StoreContext) //fine
}

But:

<button onCLick={() => <PlaySong />}></button> //not an executable function

One solution: I know i can easily solve this problem by simply creating a Playbtn component and place that in every song so it plays the song. The problem with this approach is that i am using a react-player library so i cannot place a Playbtn component in there...

Answer 1

You're so close! You just need to define the callback inside the function component.

export const PlaySongButton = ({...props}) => {
  
  const {setCurrentSong} = useContext(StoreContext);

  const playSong = () => {
    setCurrentSong("some song");
  }

  return (
    <button 
      {...props}
      onClick={() => playSong()}
    />
  )
}

If you want greater re-usability, you can create custom hooks to consume your context. Of course where you use these still has to follow the rules of hooks .

export const useSetCurrentSong = (song) => {
  const {setCurrentSong} = useContext(StoreContext);
  setCurrentSong(song);
}

It is possible to trigger a hook function by rendering a component, but you cannot call a component like you are trying to do.

const PlaySong = () => {
  const {setCurrentSong} = useContext(StoreContext);
  useEffect( () => { 
     setCurrentSong("some song");
    }, []
  }
  return null;
}

const MyComponent = () => {
   const [shouldPlay, setShouldPlay] = useState(false);
   
   return (
     <>
       <button onClick={() => setShouldPlay(true)}>Play</button>
       {shouldPlay && <PlaySong />}
     </>
   ) 
}