Add controls attribute in video tag after state changes-CodePudding

I have a video tag in reactJS.

      <video {props.flag == true && "controls"}>
        <source src= "/videos/video_tab.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
      </video>

React is giving me error for {props.flag == true && "controls"} is not correct syntax

As we know we can get controls in basic html like

      <video controls>
        <source src= "/videos/video_tab.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
      </video>

But I want to show controls only when props.flag == true by default it is false.
How do I do that ?

CodePudding user response：

I would try <video controls={props.flag}> because <video something> is short version of <video something=true>

CodePudding user response：

I suggest that you first read the React introduction.

Props are defined as an attribute and the value is an expression when using curly braces {}:

      <video controls={props.flag}>
        <source src= "/videos/video_tab.mp4" type="video/mp4"/>
        Your browser does not support the video tag.
      </video>