10 React Challenges for Beginners - Lesson #5

React Challenge: Show an Alert Based on an Input

Events make the core of interactivity in JavaScript, from listening to form inputs, scroll events to button clicks. The knowledge of handling events in JavaScript is essential.

In this React challenge, we will carry out a DOM action after an event is fired. This event is native to the input element in React, and we'll be listening with the onChange form input event.

Events are super crucial to React and JavaScript in general.

In this challenge, you'll create a form which receives input data and alerts the window when a specific word is typed in.

The main tasks of this challenge are:

  • Store form data in state.
  • Display alert if a particular word is entered into the form.

Fork this starter CodeSandbox to get started.

There are provided styles for the Sandbox in styles.css.

Here's what the final page looks like:

Look up controlled components in React, how they behave and how data is passed around and through them.

Controlled components in React have their value determined by a state variable. Also, these components are used to set the value of an assigned state variable.

The <input> element is one such element, and it receives its value from data saved in state, and it is used to change the value of this same data in state, thereby making the state variable the single source of truth.

This challenge is solved in 3 steps:

  1. Store the input data in state.
  2. Handle input to the form.
  3. Show an alert on a specific input.

The data from the input element needs to be stored somewhere so it is used in the component. This data is saved in state. Import the useState react hook into the component with:

jsx
import { useState } from 'react';

Create a new state variable phrase in the component with an empty string as default.

jsx
// import  ...

function App() {
  const [phrase, setPhrase] = useState('');

  return (
    // Return JSX
  )
}

While we have the input data in state, we can set the value of the <input> element to phrase and update phrase when the data changes using the setPhrase method.

Set the value and onChange handle with:

jsx
// import  ...

function App() {
  const [phrase, setPhrase] = useState('');

  return (
    <div className="App">
      <h2>What's the secret phrase?</h2>

      <input
        type="text"
        value={phrase}
        onChange={e => setPhrase(e.target.value)}
        placeholder="Super duper secret"
      />

      <p>
        Hint: It's <strong>open sesame</strong>
      </p>
    </div>
  );
}

With this, updating the form input updates the value of phrase.

How do we check the value of phrase and throw an alert when specific characters are entered?

This is accomplished using a simple IF statement which evaluates the value of phrase and throws an alert when a specific match is achieved.

In the App() component, create an If statement which matches the value of phrase to open sesame and throws an alert when it evaluates to true.

jsx
// import  ...

function App() {
  const [phrase, setPhrase] = useState('');

  if (phrase === 'open sesame') {
    alert('You may pass!');
  }

  return (
    <div className="App">
      {/* return JSX */}
    </div>
  );
}

With this, when a user enters open sesame, the browser throws an alert with You may pass!.

Here's what the final page looks like.

You can find the completed version here: https://codesandbox.io/s/n15z4oq24l

In this challenge, we were able to handle data input and respond to a specific input.

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)