react-share Parameter 'href' should represent a valid URL

Question

Am using react-share package for social sharing of my web page, but in FacebookShare button it shows an error like "Parameter 'href' should represent a valid URL"

My Share.js code is:-

import React from 'react'
import {
  FacebookShareButton,
  FacebookIcon,
  TwitterShareButton,
  TwitterIcon,
  WhatsappShareButton,
  WhatsappIcon,
} from 'react-share'

const ShareButtons = ({title, url}) => {

    return(
        <div>
        <WhatsappShareButton url={url} title={title}className="share-btn">
           <WhatsappIcon  size={40} round={true}/>
        </WhatsappShareButton>
        <FacebookShareButton url={url} title={title}  className="share-btn">
            <FacebookIcon  size={40} round={true}/>
        </FacebookShareButton>

        <TwitterShareButton url={url} title={title} className="share-btn">
            <TwitterIcon  size={40} round={true} />
         </TwitterShareButton>

    </div>
  )

}
export default ShareButtons

in my page:-

<ShareButtons title={this.state.package.title} url={window.location.href}/>

Answer 1

This happens if you are using localhost, try with an ip address like 127.0.0.1 or just your ip address,and you should get your url like this

  let url = '';
  if (typeof window === 'object') {
    url = String(window.location);
    console.log(url);
  }

Answer 2

You stated: try with an IP address like 172.0.0.1 I assume you meant 127.0.0.1 Changing it to 127.0.0.1 worked for me.