Inputs are everywhere! They provide interactivity in everything web.



Even the google search bar to google "HTML inputs" is an input 😉

So how do we use HTML inputs in React?

We have seen a <button> in action before in the Tweeter example

load = () => {
	setTweets(prevTweets => prevTweets.concat(additionalTweets))

    **<button onClick={load}>LOAD MORE</button>**

A quick review of HTML inputs

HTML inputs (and all other DOM elements) generate events in response to user actions.

This is regardless of the UI framework used, e.g:

event handler - the function that handles the event

In vanilla JS, there are different ways to add an event handler to an element:


// adding event listener to specified button
  .addEventListener("click", function() {
    alert("Logging out");


// inline
<button onclick="alert('Friend added!');">Add Friend</button>

  placeholder="type name here..."
  onchange='document.querySelector("#text").innerHTML += " yada ";'

// function call
<button onclick="chatFriend()">Chat</button>