Clicking on a block and controlling a child-CodePudding

Tell me how to change properties in a child element when clicking on a block

!!post &&  post.map((item) =>
    <div key={item.id} onClick={(e)=>onVideo(e)}>
        <video width="310.44" height="458" style={{objectFit: 'cover'}} controls={false}>
            <source src={item.url} type="video/mp4" />
        </video>
        <div>
            <div style={{fontSize: '16px'}}>{item.date}</div>
            <div style={{fontFamily: 'Roboto-Bold',fontSize: '22px'}}>{item.name}</div>
        </div>
    </div>)

I need when clicking onVideo an action was applied over the html video full screen was applied and play

Blocks are formed and displayed depending on the number of posts in the post and there may be 10 examples of such blocks

CodePudding user response：

Your question is unclear to me. If you want to change some prop in video through onClick of the div, you need to set up for that. For example, if you want to change the control prop on video, through div onClick, give control a variable, then change the value on div onClick. For that case, it would be like this-->

const [state,setState] = useState(false)
!!post &&  post.map((item) =>
    <div key={item.id} onClick={()=>setState(true)}>
        <video width="310.44" height="458" style={{objectFit: 'cover'}} controls={state}>
            <source src={item.url} type="video/mp4" />
        </video>
        <div>
            <div style={{fontSize: '16px'}}>{item.date}</div>
            <div style={{fontFamily: 'Roboto-Bold',fontSize: '22px'}}>{item.name}</div>
        </div>
    </div>)