Question: I have tried the solutions which are given for similar questions and tried some functions on my own too.
I have receiving the url from db so

```
const originalUrl = this.state.urlSource;
const newUrl = new URL (originalURl);
const shortenLink = newURl.hostname;

```

used that inside a tag

```
<a href={this.state.urlSource}>
{shortenLink}
</a>

```

this works but before refreshing the page after navigating,
its showing error like

> 
> Unable to construct URL: Invalid URL
> 
> 
> 

is that because of the https missing in the URL? if that's the reason, how can I check that but, I need to show the hyperlink string as hostname only but the redirect link will navigate to the expected url.

problem:

> 
> <https://www.stackoverflow.com/questions/ask>
> 
> 
> 

expected output:

> 
> [www.stackoverflow.com](http://www.stackoverflow.com)
> 
> 
>

Answer: 
I suggest using custom hooks:

`useAccord.js`

```
const useAccord = (disabled) => {
  const [expand, setExpand] = useState(false);

  const toggle = useCallback(() => {
    if (!disabled) {
      setExpand((expand) => !expand);
    }
  }, [disabled, setExpand]);

  return { expand, toggle };
};

```

`OtherComponent.js`

```
const OtherComponent = () => {
  const { expand, toggle } = useAccord(false);

  return <div className={`Accord`} onClick={toggle}></div>;
};

```

Ref:
<https://reactjs.org/docs/hooks-custom.html>
generally you can declare a function in parent component and pass it as a props to child component. now if you invoke it in child component, function execute in parent.

this concept can be developed with props, context, redux