Course: Section

Get Started with Modern React: Learn by Doing

Episode: Title

S03・V08: Click Events

Date Created: July 17th, 2019
Last Updated: 27 days ago

Objectives
  1. We will show you how to make a DOM button, with an “onClick” event.
  2. We will also show you a React button, and how it differs from a DOM button.
  3. We will make the Squares on our tic-tac-toe Board into clickable buttons.
Watch Video
Duration: 5m 29s

DOM Buttons

DOM buttons are designed to respond to users clicking on them.

We can show a DOM button in action by adding it to the index.html page in the public/ folder. Let’s put it under the root div element, which is where our React app is rendered to.

<button onclick="alert('DOM button was clicked');">
  Click me
</button>

Note that the onClick attribute is written all in lower-case, as one word. Also note that the attribute’s value is a string. Clicking on this button will show an alert in the browser.

DOM Events

A mouse click is a type of “event”. User interactions like moving the cursor, clicking and dragging, touching the screen, and adding input to a text field, are all DOM events. We will now remove the button and return to our React code.

Handling Events in React

Handling events with React elements is very similar to handling events on DOM elements.

We will now show the React equivalent of the DOM button. Within the Game component, under the Board tag, we will add a React button.

const Game = () => {
  return (
    <div className="game">
      Game
      <Board />
      <button onClick={() => alert('React button was clicked')}>        Click me      </button>    </div>
  );
};

Note that React events are named using camel-case, rather than lower-case. Also note that you pass a function, rather than a string, to the onClick event in React. The function passed in to the onClick event is often referred to as the “event handler”. As before, clicking on this button will show an alert in the browser.

It is important to note that we are passing a function to the event handler, not just the alert. If we passed just the alert, React would call the alert as soon as the page was rendered. Passing the event handler as a function means that React will call the function only when the button is clicked.

Squares as Clickable Buttons

Now that we have illustrated the use of buttons in React, we can make our rendered Squares into clickable buttons. First remove the button from the Game component. We will now convert our Square’s div into a button. We can break the button into separate lines for readability and add an onClick prop, passing it a function to show an alert when clicked.

src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';

const Square = props => {
  return (
    <button      className="square"      onClick={() => alert('click')}    >      {props.value}    </button>  );
};

const Board = () => {
  const renderSquare = i => {
    return (
      <Square value={i} />
    );
  };

  return (
    <div style={{
      backgroundColor: 'skyblue',
      margin: 40,
      padding: 20,
    }}>
      Board
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
};

const Game = () => {
  return (
    <div className="game">
      Game
      <Board />
    </div>
  );
};

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

We can now click on any square, and see the alert. Test this by clicking on the square with index 6, for example. By default, a button gets a blue outline when focused. Let’s style the button to look better when clicked.

Add Button Styles

Go to index.css. We will change the styling when the square is focused. Set the outline to none. And set a darker background-color.

src/index.css
body {
  background-color: #444;
  color: white;
  margin: 20px;
  font: 32px "Century Gothic", Futura, sans-serif;
}

.game {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.board-row {
  display: flex;
  flex-flow: row nowrap;
}

.square {
  background-color: #444;
  color: white;
  border: 1px solid #999;
  padding: 0;
  font-size: 84px;
  text-align: center;
  width: 100px;
  height: 100px;
}

.square:focus {  outline: none;  background-color: #222;}

Try clicking on the Square with index 6 again to see the effect in the browser. The blue outline is now gone, and the background of the clicked square is darker.

Summary

We showed you how to create a DOM button. We showed you how to create a React button, highlighting the differences between them. In addition, we made our tic-tac-toe squares into clickable buttons.

Next Up…

In the next video, we will look at how a component remembers and updates data.