React not rendering a new component on button click based on props

Question

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

Does this answer your question? [Show or hide element in React](https://stackoverflow.com/questions/24502898/show-or-hide-element-in-react) — Emile Bergeron, Dec 23 '21 at 17:35
This is a common beginner misunderstanding of how React works. Logically it doesn't make sense though - if this were to work, where would it render the `Plyr`? Above the `Button`? below? As a child? It just wouldn't make sense for React to work this way, and it doesn't. Instead, you must put all elements to be rendered within the `return`, and use [conditional rendering](https://reactjs.org/docs/conditional-rendering.html) to show or hide it. — Brian Thompson, Dec 23 '21 at 17:41

score 2 · Accepted Answer · answered Dec 23 '21 at 17:41

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.

I did had a thought about where the hell would react render the component if i have not stated its location but gave it a try and since it did not throw any error i was confused anyways thanks for helping me out — Yeshwanth B, Dec 23 '21 at 18:02

React not rendering a new component on button click based on props

1 Answers1