Is there a way to include a string variable in a Tweet/FB share?

Question

I am working on a school project. Project is to build a random quote generator and then share the random quote via Twitter and Facebook. I built the random quote generator with React. Generates a random quote and author and then displays them by the ReactDOM.render() method to the webpage. If I just share the link, when clicked will generate a different random quote. Looking for a way to share the current quote and author.

    const quotes=["Don't cry because it's over, smile because it happened.","I'm selfish, 
    impatient and a little insecure. I make mistakes, I am out of control and at times 
    hard to handle. But if you can't handle me at my worst, then you sure as hell don't 
    deserve me at my best.","Be yourself; everyone else is already taken.","Two things 
    are infinite: the universe and human stupidity; and I'm not sure about the 
    universe.","So many books, so little time.","Be who you are and say what you feel, 
    because those who mind don't matter, and those who matter don't mind.","A room 
    without books is like a body without a soul.","You've gotta dance like there's nobody 
    watching, Love like you'll never be hurt, Sing like there's nobody listening, And 
    live like it's heaven on earth.","You know you're in love when you can't fall asleep 
    because reality is finally better than your dreams.","You only live once, but if you 
    do it right, once is enough.","Be the change that you wish to see in the world.","In 
    three words I can sum up everything I've learned about life: it goes on.","If you 
    want to know what a man's like, take a good look at how he treats his inferiors, not 
    his equals.","Don’t walk in front of me… I may not follow. Don’t walk behind me… I 
    may not lead. Walk beside me… just be my friend","Friendship ... is born at the 
    moment when one man says to another What! You too? I thought that no one but myself . 
    . .","No one can make you feel inferior without your consent.","If you tell the 
    truth, you don't have to remember anything.","A friend is someone who knows all about 
    you and still loves you.","I've learned that people will forget what you said, people 
    will forget what you did, but people will never forget how you made them 
    feel.","Always forgive your enemies; nothing annoys them so much.","To live is the 
    rarest thing in the world. Most people exist, that is all.","Live as if you were to 
    die tomorrow. Learn as if you were to live forever.","Darkness cannot drive out 
    darkness: only light can do that. Hate cannot drive out hate: only love can do 
    that.","I am so clever that sometimes I don't understand a single word of what I am 
    saying.","Without music, life would be a mistake.","To be yourself in a world that is 
    constantly trying to make you something else is the greatest accomplishment.","Here's 
    to the crazy ones. The misfits. The rebels. The troublemakers. The round pegs in the 
    square holes. The ones who see things differently. They're not fond of rules. And 
    they have no respect for the status quo. You can quote them, disagree with them, 
    glorify or vilify them. About the only thing you can't do is ignore them. Because 
    they change things. They push the human race forward. And while some may see them as 
    the crazy ones, we see genius. Because the people who are crazy enough to think they 
    can change the world, are the ones who do.","We accept the love we think we 
    deserve.","Insanity is doing the same thing, over and over again, but expecting 
    different results.","I believe that everything happens for a reason. People change so 
    that you can learn to let go, things go wrong so that you appreciate them when 
    they're right, you believe lies so you eventually learn to trust no one but yourself, 
    and sometimes good things fall apart so better things can fall together."]
    const authors=["Dr. Seuss","Marilyn Monroe","Oscar Wilde","Albert Einstein","Frank 
    Zappa","Bernard M. Baruch","Marcus Tullius Cicero","William W. Purkey","Dr. 
    Seuss","Mae West","Mahatma Gandhi","Robert Frost","J.K. Rowling","Albert Camus","C.S. 
    Lewis","Eleanor Roosevelt","Mark Twain","Elbert Hubbard","Maya Angelou","Oscar 
    Wilde","Oscar Wilde","Mahatma Gandhi","Martin Luther King Jr.","Oscar 
    Wilde","Friedrich Nietzsche","Ralph Waldo Emerson","Rob Siltanen","Stephen 
    Chbosky","Narcotics Anonymous","Marilyn Monroe"]
    let random=Math.floor(Math.random()*(quotes.length));
    class GetNewQuote extends React.Component{
     constructor(props) {
    super(props);
       this.handleClick=this.handleClick.bind(this)
    } 
  handleClick(){
    random=Math.floor(Math.random()*(quotes.length))
   ReactDOM.render(quotes[random],document.getElementById('text'))
  ReactDOM.render(authors[random],document.getElementById('author'))

  }
  render(){
    return <button onClick={this.handleClick}class="btn btn-primary"id="new-quote"> 
   <h6>Get New Quote</h6></button>; 

  }
   } 
    ReactDOM.render(quotes[random],document.getElementById('text'));
    ReactDOM.render(authors[random],document.getElementById('author'))
    ReactDOM.render(<GetNewQuote />,document.getElementById('new-quote'))

Answer 1

Without the code I can't give you specific code snippets that will solve the issue but I assume that you are getting your quotes via an API or an array/object in your project.

Now, when you say that the quote is changed whenever you share the link, I imagine that your whole quote-getting-code is run again and thus a new quote is rendered.

You need to save the quote in some stable and consistent way so that it's kept the same on a facebook/twitter share. In this situations it's the backend (e.g. database) that does the job, so that it becomes static and separated from your random-quote-generation-logic.

ReactJS is just a front-end solution. That means that it runs exclusively in the browser. Now, it can connect to any type of backend but that means that you need to handle that separately.

The steps are as follows:

1. React App is executed, retrieves a random quote from array/backend etc. and shows it to the user in the frontend interface.
2. If the user likes the quote he/she clicks on share button.
3. Your React App must take the quote that's stored in state (I assume) and send it to a backend of yours.
4. Your backend stores the quote and returns a link to React for this specific record.
5. React shares this link in facebook/twitter.
6. Your backend must be able to produce the necessary HTML compliant with Facebook/Twitter shares based on the specific link it sent previously to React (the link that was shared)
7. Now, when Facebook/Twitter render that shared link in their apps, their bots will come to your backend via that link and your backend must produce the HTML that holds that specific quote.

Update:

For a temporary back-end you can use http://myjson.com/

It enables you to POST data in JSON format and will respond with a unique URL that contains your data whenever you GET to it.

The following code taken and modified from myjson.com samples will POST obj to myjson.com and will retrieve and log to console a unique URL that will give you your data upon request.

var obj = {
    "key": "value",
    "key2": "value2"
};

var data = JSON.stringify(obj);

    $.ajax({
        url: "https://api.myjson.com/bins",
        type: "POST",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, textStatus, jqXHR) {
            var json = JSON.stringify(data);
            console.log(json);
        }
    });

The following code taken and modified from myjson.com samples will GET the data of a URL that you provide and log it to the console.

    $.get("hereComsAURLToMyJson.comWhichYouPreviouslyGotWhenYouPostedYourData", function (data, textStatus, jqXHR) {
        var json = JSON.stringify(data);
        console.log(json);
    });

Hope that makes sense.