
 
I'm looking for a way to detect if a click event happened outside of a component, as described in this [article](https://css-tricks.com/dangers-stopping-event-propagation/). jQuery closest() is used to see if the target from a click event has the dom element as one of its parents. If there is a match the click event belongs to one of the children and is thus not considered to be outside of the component.
So in my component, I want to attach a click handler to the window. When the handler fires I need to compare the target with the dom children of my component.
The click event contains properties like "path" which seems to hold the dom path that the event has traveled. I'm not sure what to compare or how to best traverse it, and I'm thinking someone must have already put that in a clever utility function... No? 

The following solution uses ES6 and follows best practices for binding as well as setting the ref through a method.
To see it in action:

1 [Hooks Implementation](https://codesandbox.io/s/outside-alerter-hooks-lmr2y?module=%2Fsrc%2FOutsideAlerter.js)

2 [Class Implementation After React 16.3](https://codesandbox.io/s/outside-alerter-react-16-3-0-bn267m?file=/src/OutsideAlerter.js)

3[Class Implementation Before React 16.3](https://codesandbox.io/s/30q3mzjv91?module=%2Fsrc%2FOutsideAlerter.js) 

## Hooks Implementation:  

```js 
import React, { useRef, useEffect } from "react";

/**
 * Hook that alerts clicks outside of the passed ref
 */function useOutsideAlerter(ref) {
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */ function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert("You clicked outside of me!");
      }
    }
    // Bind the event listener document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);
}

/**
 * Component that alerts if you click outside of it
 */export default function OutsideAlerter(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);

  return <div ref={wrapperRef}>{props.children}</div>;
} 
```

## Class Implementation 
__After 16.3__
 
```js 
import React, { Component } from "react";

/**
 * Component that alerts if you click outside of it
 */export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.wrapperRef = React.createRef();
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  /**
   * Alert if clicked on outside of element
   */ handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
      alert("You clicked outside of me!");
    }
  }

  render() {
    return <div ref={this.wrapperRef}>{this.props.children}</div>;
  }
} 
``` 

__Before 16.3__
 

```js 
import React, { Component } from "react";

/**
 * Component that alerts if you click outside of it
 */export default class OutsideAlerter extends Component {
  constructor(props) {
    super(props);

    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  /**
   * Set the wrapper ref
   */ setWrapperRef(node) {
    this.wrapperRef = node;
  }

  /**
   * Alert if clicked on outside of element
   */ handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert("You clicked outside of me!");
    }
  }

  render() {
    return <div ref={this.setWrapperRef}>{this.props.children}</div>;
  }
} 
 ``` 

## Using useState

```js
import React, { useState } from "react";
import "./DropDown.css";

export function DropDown({ options, callback }) {
    const [selected, setSelected] = useState("");
    const [expanded, setExpanded] = useState(false);

    function expand() {
        setExpanded(true);
    }

    function close() {
        setExpanded(false);
    }

    function select(event) {
        const value = event.target.textContent;
        callback(value);
        close();
        setSelected(value);
    }

 return (
        <div className="dropdown" tabIndex={0} onFocus={expand} onBlur={close} >
            <div>{selected}</div>
            {expanded ? (
                <div className={"dropdown-options-list"}>
                    {options.map((O) => (
                        <div className={"dropdown-option"} onClick={select}>
                            {O}
                        </div>
                    ))}
                </div>
            ) : null}
        </div>
    );
}
``` 

How to Detect click outside React component?


 
With react-router I can use the Link element to create links which are natively handled by react router.
I see internally it calls this.context.transitionTo(...).
If I want to do a navigation not from a link, but from a dropdown selection for example. 
How can I do this in code?  
You can use
For React Router v4+
## UseNavigate
#### You can  use useNavigate for simplicity  
 ```js
import { useNavigate } from "react-router-dom";

const Newfile = () => {
    const navigate = useNavigate();
   
    ....

    navigate("yourdesiredlocation");

    ....
}

export default Newfile;

```


There is a new useHistory hook in React Router >5.1.0 if you are using React >16.8.0 and functional components. 
## UseHistory
```js
import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
 ```


 ```js 

import { useHistory } from 'react-router-dom';


const Component = (props) => {

    const history = useHistory();

  // Programmatically navigate

    history.push(newUrlString);
}
```

## withRouter  
the withRouter higher-order component will inject the history object as a prop of the component. This allows you to access the push and replace methods without having to deal with the context. 

```js 

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))
```
 

How to Programmatically navigate using React router?


 
In this article I will show you  How to check if a string contains a certain words . Using ES5 function indexOf and ES6 function includes
Here you go:
## With  __ES5__
```js
var test = 'Hello World';
if( test.indexOf('World') >= 0){
  // Found world
}
```
## With __ES6__

 best way would be to use includes function to test if the string contains the looking work.
```js
const test = 'Hello World';
if (test.includes('World')) { 
  // Found world
}
 ```


How to check if a string has a certain piece of text?


 
What is a reasonable way to check for this? 
 ECMAScript 6 introduced [String.prototype.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes):
```js
const string = "foo";
const substring = "oo";

console.log(string.includes(substring)); // true 
```

includes [doesn’t have Internet Explorer support](https://caniuse.com/#feat=es6-string-includes), though. In ECMAScript 5 or older environments, use [String.prototype.indexOf](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), which returns -1 when a substring cannot be found:

```js 
const string = "foo";
const substring = "oo";

console.log(string.indexOf(substring) !== -1); // true 
```

How do I conditionally add attributes to React components?


 
I'm attempting to hide an item when a user scrolls within a div. The Card component shown is a scrollable component. When the user scrolls within it I want to hide an item. What is the best way to go about this? 
something you could do is move the scrolling ? null : ... outside of the return and just keep it a variable.
 

```js
const [scrolling, setScrolling] = useState(false);
const handleScroll = (e) => {
  setScrolling(true);
};

const item = scrolling ? null :  <p> hide me on scroll </p>
    
return (
  <Card onScroll={handleScroll}>
    {item}
  </Card>
);
```

Results for answers

How to Detect click outside React component?

How to Programmatically navigate using React router?

How to check if a string has a certain piece of text?

How do I conditionally add attributes to React components?

How to hide Hide Item onScroll React?