React not rendering a new component on button click-CodePudding

I was trying to make a function that takes in props and then render a component on button click but for some reason the code wont render any component on click nor there are any errors in the console log here is the code

const App = () => {
    const RenderVideoPlayer = (props) => {
        let videoSrc = {
            type: 'video',
            sources: [
                {
                  src: `${props.video_url}`,
                  type: 'video/mp4',
                  size: 1080
                }
            ],
            poster: '/path/to/poster.jpg',
        }
        return (
            <Plyr
                options={options}
                source={videoSrc}
            />
        )
    }


return (
<Button className="s-btn-1" variant="primary" onClick={() => RenderVideoPlayer(movie.video_info[0])}>Watch</Button>
)

I can confirm that it is receiving the props onclick

CodePudding user response：

Because that isn't at all how React works. Returning a component to the onClick event isn't going to render that component. Instead, put the component in your returned JSX, but conditionally render it based on state. Then in the click handler simply update that state. For example:

const [showPlayer, setShowPlayer] = useState(false);

return (
  <>
    <Button onClick={() => setShowPlayer(true)}>Watch</Button>
    { showPlayer ? <Plyr ... /> : null }
  </>
);

This is obviously very simplistic, but demonstrates the concept. You can make the button into a show/hide toggle by using !showPlayer instead of true for example. Or you could show/hide multiple players by tracking which ones are shown/hidden in state and then rendering an array of them based on that state. And so on.

But the main point is that you can't just return JSX from an event handler and expect React to do anything with that. Rely on state for tracking all of the information you need to render the result. The JSX uses state in the rendering, and events update state.

CodePudding user response：

React will only re-render your view if has detected a state change, which in this case did not happen.

What you can do is the following:

const App = () => {

    const [video, setVideo] = useState();    

    const RenderVideoPlayer = (props) => {
        let videoSrc = {
            type: 'video',
            sources: [
                {
                  src: `${props.video_url}`,
                  type: 'video/mp4',
                  size: 1080
                }
            ],
            poster: '/path/to/poster.jpg',
        }
        return (
            <Plyr
                options={options}
                source={videoSrc}
            />
        )
    }


return (
<Button className="s-btn-1" variant="primary" onClick={setVideo(movie.video_info[0])}>Watch</Button>
)

Now by clicking the button you change the value of video, React will detect it and re-render the view.

See more here: https://reactjs.org/docs/hooks-intro.html