0

I have a draggable icon. But onClick is not working on that icon.

import styled from "@emotion/styled"
import Draggable from 'react-draggable';
import { BsPlusCircle } from 'react-icons/bs';

const StartWrapper = styled.div`
position: absolute;
bottom: 74px;
display: block;
margin: 0 auto;
width: calc(100% - 24px);
font-family: Montserrat, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 500;
letter-spacing: 0em;
text-align: center;
color: rgba(91, 91, 91, 0.69);
border: 1px solid white;
height: 170px;
line-height: 170px;
`

export const App = ( ) => {

    const show = () => {
        console.log("Show");
    }

    return (
         <StartWrapper onClick={()=> start()}>
                <Draggable>       
                      <BsPlusCircle  onClick={() => show()}  />
                </Draggable>
         </StartWrapper>
    )
}

The start function works. But the show function does not work. Any help will be greatly appreciated.

Boidurja Talukdar
  • 676
  • 2
  • 21
  • 42
  • What does the start function and StartWrapper do? This code works in codesandbox if i remove the StartWrapper (which i dont have the code for) – jsonderulo Oct 22 '21 at 07:16
  • The start function just does console.log(). I have added the code for StartWrapper in my question above. – Boidurja Talukdar Oct 22 '21 at 07:35
  • thanks for your reply, I've removed my answer since it's not working, also I'm trying to find another solution in your case – nima Oct 22 '21 at 09:06

2 Answers2

0

Looks like you need to pass a ref to the StartWrapper and Draggable components

import styled from "@emotion/styled";
import { useRef } from "react";
import Draggable from "react-draggable";
import { BsPlusCircle } from "react-icons/bs";

const StartWrapper = styled.div`
  position: absolute;
  bottom: 74px;
  display: block;
  margin: 0 auto;
  width: calc(100% - 24px);
  font-family: Montserrat, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0em;
  text-align: center;
  color: rgba(91, 91, 91, 0.69);
  border: 1px solid white;
  height: 170px;
  line-height: 170px;
`;

export const App = () => {
  const ref = useRef(null); //ADD THIS
  const show = () => {
    console.log("Show");
  };

  return (
//Then pass refs to StartWrapper and Draggable
    <StartWrapper ref={ref} onClick={() => console.log("Hello")}>
      <Draggable ref={ref}>
        <BsPlusCircle onClick={() => show()} />
      </Draggable>
    </StartWrapper>
  );
};

This works for me in codesanbox

findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode

jsonderulo
  • 1,241
  • 1
  • 12
  • 18
-2
<Draggable cancel=".clickable">
    <div className="clickable" onClick={() => callFunc()}></div>
</Draggable>
Sourav Purkait
  • 248
  • 2
  • 6