Setting the Stage

Let's imagine we're building an application for a store. We want to create a feature where the store owner can input how much cash is in the register at any given time. For this, we need a cash field that accepts only numerical input. This is where we'll be focusing our attention in this blog post.

Understanding ReactJS Components

Before we dive into creating the cash field, let's briefly touch on what a ReactJS component is. A component in ReactJS can be thought of as a piece of a puzzle. It's a self-contained chunk of code that can be reused throughout your application. Just like a puzzle piece, a component has a specific shape (its properties or "props") and a specific way it interacts with the other pieces (its functionality).

Our cash field will be a ReactJS component, and we'll be able to use it wherever we need an input field for cash amounts in our application.

Creating the CashField Component

Now, let's create our CashField component. It's going to be a functional component (a component represented by a JavaScript function), as it's a simpler and more modern way to define components in ReactJS.

function CashField() {
    return (
        <input type="number" min="0" step="0.01"/>
    );
}

Here, we're using the input HTML element with the type set to number. This ensures that the field only accepts numerical input. The min attribute is set to 0 to prevent negative values, and the step attribute is set to 0.01 to allow for cents in the cash amounts.

Handling User Input

So far, our CashField component is pretty static. It doesn't do anything when the user inputs a value. To change this, we need to add an event handler that triggers whenever the value of the input field changes.

An event handler is a function that gets called when a certain event (such as a button click, a key press, or an input change) happens. In our case, the event is the input field value changing, so we're going to use the onChange event.

Our event handler function will look something like this:

function handleCashChange(event) {
    console.log(event.target.value);
}

This function logs the new value of the input field whenever it changes. The event.target.value expression is how we access the new value.

We then add this function to our CashField component like so:

function CashField() {
    function handleCashChange(event) {
        console.log(event.target.value);
    }

    return (
        <input type="number" min="0" step="0.01" onChange={handleCashChange}/>
    );
}

Now, every time the user inputs a value, that value gets logged to the console.

Storing the Cash Value

Logging the cash value to the console is nice, but it's not very useful. What we want to do is store this value so that other parts of our application can access it.

In ReactJS, we use something called "state" to store dynamic data like this. You can think of state as the memory of a component. It remembers certain values and can change them when needed.

We use the useState hook to create a state variable in our component. The useState hook is a function that takes one argument (the initial value of the state) and returns an array with two elements: the current state value and a function to update it.

Let's add a state to our CashField component:

import React, { useState } from 'react';

function CashField() {
    const [cash, setCash] = useState(0);

    function handleCashChange(event) {
        setCash(event.target.value);
    }

    return (
        <input type="number" min="0" step="0.01" onChange={handleCashChange}/>
    );
}

Here, cash is our state variable that holds the current cash value, and setCash is the function we use to update this value. We initially set the cash value to 0. In our handleCashChange function, we now call setCash with the new cash value.

Conclusion

And there you have it! You've just created a fully functional cash field in ReactJS. You now know how to create a basic ReactJS component, handle user input, and store dynamic data in the state.

You might be thinking, "This was just a simple cash field. There's so much more I want to do!" And you're absolutely right. The beauty of ReactJS is that it's extremely flexible and powerful. You can build upon these basic concepts to create complex and interactive applications.

Just remember, every grand structure starts with a single brick. In the world of ReactJS, each brick is a component. The cash field you created today is one of these bricks. So, pat yourself on the back and keep building!