type: posts layout: default title: Triggering An Event With React line: – date: 2016-03-08 categories: react, event, button, trigger, javascript name: post8 lang: en <!– — –>

The hardest thing about learning something new, at least for me, is thinking the concepts I’ve learned in other languages/frameworks/libraries will translate easily. But, rarely is that the case.

With those former lessons learned in mind, I decided to start small when learning React. The goal was a single-page random quote generating web page, no APIs, minimal CSS, with one button triggering two events. Simple. Starting small was helpful in that I was able to understand React’s basic concepts without feeling overwhelmed.

Understanding React’s virtual DOM, render function and data flow is key, and after a while, it began to (sort of) make sense. But, I struggled with getting the button on the page to trigger the event that was to randomly pick a quote. Once it was working, I realized there were a few more parts to this than I was expecting. Below is how I got it working.

I first set a constuctor function

    constructor(){
        super();
        this.state={
          quotes,
          quote: ''
        }
      }