change multiple values with useState

Question

Hope someone could help me out.

I am trying to pass two parameters to

first parameter is setOpenModal second parameter is setLinkVideo

I am having no issue with the first parameter, but can not get the second one to work.

The following line doesn't work too:

 {openModal && }

Hope someone can help me to find a soluction.

Tks in advance!!!


function Publicidade() {
    const [openModal, setOpenModal] = useState(false);
    const [linkVideo, setLinkVideo] = useState('');
    return (
        
            
                
                    
                        
                             { setOpenModal(true) && setLinkVideo({iframe_01}) }}
                                src="https://tse1.mm.bing.net/th?id=OIP.KRDXVIDQh58FyCzeWRV2jAHaKi&pid=Api&P=0&w=122&h=173" alt="">
                        
                        
                        
                        
                        
                        
                        
                        

                    
                
            
            {openModal && }
        
    )
}
export default Publicidade;

user_2123547 · Answer

You should do

() => {
  setOpenModal(true);
  setLinkVideo({iframe_01})
}

because setOpenModal(true) && setLinkVideo({iframe_01}) won't run the setLinkVideo function since the result of setOpenModal(true) is undefined

Hope that helps!

user_14403196 · Answer

In your HTML img tag, inside onClick property, there's code that works not as intended. In your example, two functions is between an operator, so neither of the function is being executed. To fix your code, you should do following:

Create a function like handleImageClick, that takes in video link as argument, and calls both react setState functions

   const handleImageClick = (videoLink) => {
     setOpenModal(true)
     setLinkVideo(videoLink)
   }

Also check Modal component prop videoLink, since from example it seems that it takes value, not a function that sets video link. Or would recommend reviewing your function and variable naming. If Modal from inside can change videoLink there should be two props, for value and value setting. For example:

change multiple values with useState

2 Answers