Why i can't access my two container's current target value using react js on making outside click?

Question

Using this https://codedaily.io/tutorials/Create-a-Dropdown-in-React-that-Closes-When-the-Body-is-Clicked i have found my solution to make my dropdown to get close on click of outside anywhere else.

But problem is, i have two similar components of dropdown to get this apply, so when i apply my last dropdown was working properly but not the first one.I can't get this why ? can anyone please help me on this.

    this.container = React.createRef();
    this.state = {
      open: false,
    };
    componentDidMount() {
      document.addEventListener("mousedown", this.handleClickOutside);
    }
    componentWillUnmount() {
      document.removeEventListener("mousedown", this.handleClickOutside);
    }
    handleClickOutside = (event) => {
     if (
       this.container.current &&
       !this.container.current.contains(event.target)
      ) {
    this.setState({
      open: false,
    });
   }
   };

and at my body div,

   <div className="container" ref={this.container}>
     {this.state.open && <div>mydropdown1</div>}
   </div>
   <div className="container" ref={this.container}>
     {this.state.open && <div>mydropdown2</div>}
   </div>

Or can i use react-foco?

My guess is that you used the same ref for the two div, so only the div who got the container ref last will be impacted but not the other. I think mydropdown should be a component so it can be easier to manage his state instead of trying to make the logic parent side. — Nicolas Menettrier, Jun 01 '21 at 06:55
yes, how can i sort this out? like i should change my ref or something else? can you guide me on this please @NicolasMenettrier — Mercy Kannan, Jun 01 '21 at 06:56
Your guess was right, what will be the alternate for this, to access the outsideclick of the dropdwon @NicolasMenettrier — Mercy Kannan, Jun 01 '21 at 06:59
https://codepen.io/NicolasMenettrier/pen/LYWezjq?editors=1111 I will do something like that maybe, not perfect but it show you the idea — Nicolas Menettrier, Jun 01 '21 at 07:23

score 0 · Answer 1 · answered Jun 01 '21 at 08:08

You need to consider below points to get your work done,

Two separate refs for two dropdown containers.
Maintain two different state variables

Need to handle cases in both handleClickoutside and handleButtonClick methods for refs and button click respectively. refer below code

container1 = React.createRef();
container2 = React.createRef();
state = {
    open1: false,
    open2: false,
        };

componentDidMount() {
   document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
   document.removeEventListener('mousedown', this.handleClickOutside);
}

handleClickOutside = (event) => {
       if (
          this.container1.current &&
          !this.container1.current.contains(event.target)
          ) {
              this.setState({open1: false});
          }
      if (
         this.container2.current &&
         !this.container2.current.contains(event.target)
         ) {
             this.setState({open2: false});
          }
       };
  }

handleButtonClick = (containerNumber) => {
         this.setState({[containerNumber]: !this.state[containerNumber]});
     };
 // your code

Thank you @ShwetaJoshi , but still my last ref is working properly not the first dropdown's ref — Mercy Kannan, Jun 01 '21 at 08:32
I have updated the same as you did, problem is at my handlebutton click i have an option to select the dropdown values, as i said before when my ref is not getting applied at that time i cant select anything only inside the first dropdown , but my second last dropdown was working fine as we expected — Mercy Kannan, Jun 02 '21 at 07:21

Why i can't access my two container's current target value using react js on making outside click?

1 Answers1