React share contents on social media

Question

Dear stack over flow community. I am building a react app using create react app where I will show a random joke fetched from an external API.

Here is the code for react component

   import React from "react"
   function Home(props) {
        return (
            <div>
                <h2>{props.joke.setup}</h2>
                    <h3>{props.joke.punchline}</h3>
            </div>
        )
    }

I want to include a share functionality to share the current joke on social media. I tried react-share package, but the share button used in there only allows to pass a url. Which in my case will be the base url of my app, and could not include the current joke that I am displaying.

    import { FacebookShareButton, FacebookIcon } from "react-share"
    <FacebookShareButton url="#">
        <FacebookIcon logoFillColor="white" />
    </FacebookShareButton>

How could I include a share button that shares the content of react components, values of state or props rather than just url? For example a share button like the above but has additional props that I can pass content in, props.joke.setup, props.joke.punchline Thank you very much

Answer 1

I have found a way myself. Sorry I should have read the documentation of react-share package better. There is optional props that you can pass to the share button. So I did this.

<FacebookShareButton
    url="someurl"
    quote={props.joke.setup + props.joke.punchline}
    hashtag="#programing joke">
    <FacebookIcon logoFillColor="white" />
</FacebookShareButton>