how to close the menu when clicked

See also questions close to this topic

• Updating React state in nested setTimeout callbacks

  Can someone please tell me what's wrong with this and why the state of the 'video variable' remains false? So, even after the h2 element has rendered and is visible (i.e. the state of the video variable has been updated to true), when I click and call the hideVideo function, the video state remains false? Many thanks.

  export default function App() {
    const [message, showMessage] = useState(false);
    const [video, setVideo] = useState(false);
    
  let modalTimeout, videoTimeout;
  
    useEffect(() => {
     
      window.addEventListener("click", hideVideo);
      setupTimeouts();
      return () => {
        clearTimeout(modalTimeout);
        clearTimeout(videoTimeout);
      };
    }, []);
  
    const setupTimeouts = () => {
      modalTimeout = setTimeout(() => {
        showMessage(true);
  
        videoTimeout = setTimeout(() => {
         
          showMessage(false);
          setVideo(true);
        }, 4000);
      }, 2000);
    };
  
    const hideVideo = () => {
      console.log(video);
      showMessage(false);
      if (video === true) {
        setVideo(false);
        
      }
    };
  
    return (
      <div className="App">
        {message && <h1>Message</h1>}
        {video && <h2>Video</h2>}
      </div>
    );
  }
  
• React-dnd multiple elements

  I can make react-dnd drag easily having a single element to drag over however I have array of 4 fields I'd like to make draggable. In my example code down below it creates four boxes from mapping the array and each box has a className of 'element'. Which should make them all draggable however they won't move.

  Here is my drag code:

   const ELEMENT = 'element';
      const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
        type: ELEMENT,
        collect: (monitor) => ({
          isDragging: monitor.isDragging()
        })
      }))
  

  Here is my draggable element:

   {FieldDetail.map((e,i) =>  
     <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
          <div className='element' ref={drag}></div>            
      </div>          
    )} 
  

  Any ideas? Do I need to do something more within the type or className?
• One connection - multiple channels

  I have 2 watchers, each one creates a socket connection. How to make one connection?

  There is a solution to move the connection to the socket into a variable and pass it to Watchers? There is a comment in the code where the socket is connected.

  Channels in watchers

  export function* watchOnSocketBinanceRT() {
    while (true) {
      const { socketToken } = yield take(types.BINANCE_SOCKET_OPEN);
      const socket = yield call(socketConnectionBinance, socketToken); // Creates a new connection
      const channel = yield call(socketChannelBinanceRT, socket);
  
      if (socket.onopen) {
        yield put({ type: types.BINANCE_SOCKET_CONNECTED });
      }
  
      yield fork(socketSendBinance, socket);
      yield fork(socketCloseBinance, socket);
  
      const { cancel } = yield race({
        task: call(socketOnmessageBinance, channel),
        cancel: take(types.BINANCE_SOCKET_CLOSED),
      });
  
      if (cancel) {
        buffersRT.flush();
        channel.close();
      }
    }
  }
  
  export function* watchOnSocketBinance() {
    while (true) {
      const { socketToken } = yield take(types.BINANCE_SOCKET_OPEN);
      const socket = yield call(socketConnectionBinance, socketToken); // Creates a new connection
      const channel = yield call(socketChannelBinance, socket);
  
      if (socket.onopen) {
        yield put({ type: types.BINANCE_SOCKET_CONNECTED });
      }
  
      yield fork(socketSendBinance, socket);
      yield fork(socketCloseBinance, socket);
  
      const { cancel } = yield race({
        task: call(socketOnmessageBinance, channel),
        cancel: take(types.BINANCE_SOCKET_CLOSED),
      });
  
      if (cancel) {
        channel.close();
      }
    }
  }
  

  Socket connection

  const socketConnectionBinance = socketToken => {
    return new Promise((resolve, reject) => {
      let socket;
      if (socketToken) {
        socket = new WebSocket(`${wsUrlBinance()}/${socketToken}`);
      } else {
        socket = new WebSocket(`${wsUrlBinance()}`);
      }
  
      socket.onopen = function () {
        resolve(socket);
        console.log('Binance connection opened');
      };
      socket.onerror = function (event) {
        reject(event);
        console.log('Binance socket error: ', event);
      };
      socket.onclose = function (event) {
        if (event.wasClean) {
          console.log('Binance connection closed');
        }
      };
    });
  };
  

  Thanks for the help!
• Bootstrap5 Stretched-link doesn't work with a simple card

  I have a small problem, stretched-link doesn't want to work with my card, I tried everything from Bootstrap docs. Tried also removing buttons cause I've read that they don't "live well" with stretched-link. I use django-bootstrap-v5 (is it good to use this btw.?)

  This is my code:

         <div class="card mb-3" style="width: 81rem;">
              <div class="row g-0">
                  <div class="col-md-4">
                      <a type="button" class="streched-link" href="{% url 'bloger:post' post.id %}">
                          <img class="img-fluid" src="...">
                      </a>
                  </div>
                  <div class="col-md-8" style="max-height: 11rem;">
                      <div class="card-header d-flex bd-highlight">
                          <small class="text-muted p-1 flex-grow-1">Added {{ post.date_added|timesince:currentdate}} ago.</small>
                          <small class="text-muted p-1 flex-grow-3">Komentarze: {{ post.blogcomment_set.count }}</small>
                      </div>
                      <div class="card-body" style="max-height: 10rem;">
                          <h4 class="card-title">{{post.title|title}}</h4>
                          <p class="card-text" style="max-height: 8.4rem;"><i>{{post.truncated_text}}</i></p>
                          <a class="streched-link btn btn-danger" href="{% url 'bloger:post' post.id %}">Read more</a>
                      </div>
                  </div>
              </div>
          </div>
  
• Semantic UI Dropdown Not Working With Bootstrap 5 Dropdown

  I'm trying to make a select dropdown list with semantic UI. I followed the example on their website guide Semantic UI Dropdown Usage

  But it looks like in bootstrap 5 calling $('.ui.dropdown').dropdown() doesn't work properly, it initially worked well when i was using bootstrap 4 but since i upgraded to bootstrap 5 that is when i started getting this errors:

      at o.r.show (bootstrap.min.js:6)
      at o.r.toggle (bootstrap.min.js:6)
      at HTMLSelectElement.<anonymous> (bootstrap.min.js:6)
      at HTMLSelectElement.n (bootstrap.min.js:6)
  

  Can some help out am stuck trying to figure out what might be the reason this is happening. I tried re-arranging the order of JS includes:

      <script src="/js/jquery-3.4.1.min.js"></script>
      <script src="/bootstrap/js/bootstrap.min.js"></script>
      <script src="/bs-init.js"></script>
      <script src="/apis/map.api.google.js"></script>
      <script src="/plugins/hammer.min.js"></script>
      <script src="/plugins/semantic.min.js"></script>
      <script src="/plugins/bmd.js"></script>
      <script src="/app.ca.layout.js"></script>
  

  But nothing works still! any Help?
• bootstrap 5 how to close previously opened card that is flipped

  Here is the codepen.io: https://codepen.io/fsfsfs/pen/zYNjwqX

  Any suggestions, please?