Random Quote – Part 8 – React Hooks: Using various front end stacks

8 min read

Building a random quote machine with React Hooks

This is Part 8 of the Making a random quote machine in a few different flavors series.

You can read more about this project’s background on the project’s page. Or start from the beginning with part 1 of this series.

In flavor #7, the app’s UI is built using a User Interface Library (React) and I have the data (quotes) inside a JSON file. In this flavor, the data is inside an array (like in flavor #6), but here I’m creating function components in a React app with Hooks (not using React classes like previously).


In Part 9 (to be posted next week), I will cover a ninth flavor and will be calling an asynchronous endpoint to request the data, while still using React Hooks.

If you’re curious about the next flavors and would like to make a writer very happy today, you should join Morse Wall’s newsletter.


Flavor #8: HTML + CSS + React Hooks + quotes array

I have the data (quotes) in an array inside my script.js like previously in flavor #6.

Actually, since much of the code in this flavor remains the same as in flavor #6, it may be helpful to give that writing a quick read.

Why React Hooks?

React Hooks do not add new features to React, they are a different way of doing the same (not being facetious though, there is obviously strong motivation behind React Hooks).

But if the TLDR according to the React core team is: “There are no plans to remove classes from React”, why make a flavor with React Hooks? Because:

True that…

There are always (at least) two ways to solve a problem. One is faster, the other you just don’t know yet.

The above is the spirit behind the Making a random quote machine in a few different flavors series. And with that in mind, there is no better way to practice a new way to solve a problem than to ship a simple app in a simpler environment with fewer moving parts. Enjoy!

Quick note: React is moving on. If Hooks are successful, it is possible that in the future, class support might move into a separate package.

One function component

I’ll be incrementally expanding one function component throughout this write-up. This component selects a quote from the quotes array, it then sets this quote in the component’s internal state (for more on state, check “What is state?” in flavor #4) and lastly, renders the quote in the HTML.

“Function components” in React come with React Hooks and were previously known as “stateless functional components”. These components did not contain their own state previously, but with React Hooks they are now able to have their own state.

Defining App, the function component:

// script.js
//defining the function component.
const App = () => {
}

I’m designing App to select a random quote, set the quote in the component’s internal state and lastly render the quote in the HTML.

Firstly, I’m lazily initializing the quote state variable to the value returned by quotes[Math.floor(Math.random() * quotes.length)]. I do this by calling the useState Hook (more on what’s a Hook further down) inside the component.

This initial state is used during the initial render. In subsequent renders, it is disregarded. The function I’m passing to useState will be executed only on the initial render.

// script.js
//defining the function component.
const App = () => {
  const quoteState = useState(() => {
    return quotes[Math.floor(Math.random() * quotes.length)];
  });
  const quote = quoteState[0]; // Contains the value returned by function passed to `useState`
  const setQuote = quoteState[1]; // It’s a function
}

Simplifying the above with array destructuring:

// script.js
//defining the function component.
const App = () => {
  //using a function to lazy initialize the initial state
  const [quote, setQuote] = React.useState(() => {
    return quotes[Math.floor(Math.random() * quotes.length)];
  });
}

The useState Hook returns two values (an array with two items): the first item is the current state and the second is a function that allows me to update the state.

A Hook is a special function that allows me to “hook into” React features. useState is a Hook that lets me add React state to function components.

Previously, whenever I had to add state to a stateless functional component, I had to convert it to a class. Now I can simply use a Hook inside the component.

The component’s state

Component's state

With the code so far, I’m setting the initial random quote in the component’s state, but have not fully shipped the full “I want to be welcomed by a quote when I first load the app” user story since I have not made the component render yet. My page is still empty.

Updating the state

Before I move into rendering, I’m defining a function (chosenRandomQuoteToState) to update the state with a new quote. This will allow me to handle the second user stories: “I want to be able to click a UI element (a button) to get a new quote”.

// index.js
const App = () => {
  //using a function to lazy initialize the initial state
  const [quote, setQuote] = React.useState(() => {
    return quotes[Math.floor(Math.random() * quotes.length)];
  });

  const random = array => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = array => {
    return array[random(array)];
  };

  //defining a function to update the state with a new quote
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(quotes);
    setQuote(chosenQuote);
  };
}

I’ve made the decision to write the non-DRY code above (I’m repeating myself when defining random and randomQuoteFunction as these functions had already been written when passed to useState as lazy initial state) since, as per the Rules of Hooks, I should only call Hooks at the top level of a React function component.

The nice thing with this rule, is that it ensures (beyond other things) that all stateful logic in a component is clearly visible when one reads the code.

As per code snippet above, I’m updating the state by calling setQuote, the function that allows me to update the state.

My page is still empty though, the component does not return any JSX yet. Time to build the UI and attach the necessary event handlers.

Building the UI

The button element below has an onClick() handler. This handler is triggered when the button receives a click event in the browser and runs the chosenRandomQuoteToState function defined previously.

chosenRandomQuoteToState then updates the state with a new random quote by calling setCount. React will then re-render the App component, passing the new quote value to it (rendering quote.quoteText and quote.quoteAuthor as the quote text and the quote author respectively).

//defining the function component.
const App = () => {
  const [quote, setQuote] = React.useState("");

  const random = array => {
    return Math.floor(Math.random() * array.length);
  };

  const randomQuoteFunction = array => {
    return array[random(array)];
  };

  //defining a function to update the state with a new quote
  const chosenRandomQuoteToState = () => {
    //selecting a random quote from the array
    let chosenQuote = randomQuoteFunction(quotes);
    setQuote(chosenQuote);
  };

  //the component returns JSX, and as per code snippet below, JSX clearly represents HTML, composing the UI.
  return (
    //as a React component can only return one single element, I’m using <React.Fragment> to add a parent tag to my JSX elements without adding an extra node to the DOM.
    <React.Fragment>
      <div className="container">
        <div id="quote-box">
          <div className="quotable-square">
            <div className="content">
              <div id="text">{quote.quoteText}</div>
              <div id="author" className="author">
                {quote.quoteAuthor}
              </div>
            </div>
          </div>
          <div className="actions">
            <button
              id="new-quote"
              className="new-quote"
              onClick={chosenRandomQuoteToState}
            >
              Get New Quote
            </button>
            <button className="tweet-quote">
              <a id="tweet-quote" href={twitterLink} target="_blank">
                <i className="fab fa-twitter"></i>Tweet Quote
              </a>
            </button>
          </div>
        </div>
      </div>
      <footer>
        <ul className="footer-options">
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Legal
            </a>
          </li>
          <li className="footer-link">
            <a href="#" className="footer-linktext">
              Contact Us
            </a>
          </li>
        </ul>
        <span>© 2019 Developed by Pat Eskinasy. All Rights Reserved.</span>
      </footer>
    </React.Fragment>
  );
};

With the code so far I’m shipping both the first and the second user stories!

Making the machine tweet

The logic to invoke Twitter Web Intents is, however, still missing (allowing me to ship the last user story: “I want to be able to share on Twitter the quote the random quote machine gives me so that I can share my source of inspiration with the world”), so here it comes:

// script.js

//defining the function component.
const App = () => {
  ...
//making the machine tweet
  let twitterLink;
  let quoteTextElem = quote.quoteText;
  let quoteAuthorElem = " - " + quote.quoteAuthor;
  let contentQuote = quoteTextElem + quoteAuthorElem;
  if (contentQuote.length > 280) {
    let charCountAuthor = quoteAuthorElem.length;
    const extraStylingChar = "..." + '"';
    let extraCharCount = extraStylingChar.length;
    let subString =
      quoteTextElem.substring(0, 280 - extraCharCount - charCountAuthor) +
      extraStylingChar +
      quoteAuthorElem;
    //generate url available for Twitter intent and inject url on HTML
    twitterLink = "https://twitter.com/intent/tweet?text=" + subString;
  } else {
    //generate url available for Twitter intent and inject url on HTML
    twitterLink = "https://twitter.com/intent/tweet?text=" + contentQuote;
  }
  return (
  ...
  )
}

The above code to make the machine tweet is very much in line with what has been implemented in all previous flavors of this project. In other words, the code here follows the logic implemented in part 1 of this series.

This is pretty much it. The rest of the code remains the same as in flavor #6.

You can check the project live. Source code for flavor #8 in Github.

Live project Source code


In Part 9 (to be posted next week), I will cover a ninth flavor and will be calling an asynchronous endpoint to request the data, while still using React Hooks.

If you’re curious about the next flavors, you should join Morse Wall’s newsletter. I think you’ll like it a lot!


So, what did you like about this post? Leave a comment or come say hello on Twitter!

Also, if you have built a random quote machine after reading this post, share it below as a comment. Really excited to see what you create!

Happy coding!

Enjoyed this content?

Help keep it coming by sending a donation or buying me coffees.
You can also join Morse Wall's newsletter, or subscribe to various site feeds to get notified of new posts or follow Morse Wall on social media.

Leave a comment

by Pat
by Pat