React Fundamentals:useState hook scenario: Basics 04

Photo by Lautaro Andreani on Unsplash

This is an ongoing effort to give a general overview of the guiding ideas and React’s foundational concepts with typescript.

Here is the link to the previous article.

React Fundamentals Basics | Medium

https://medium.com/@maheshguntumadugu/react-fundamentals-passing-children-basics-03-17165208ab2c

Let’s get started:

In this article, I will introduce the useState hook. If you have followed previous articles, this is just a continuation and a simple use case.

Scenario: The user will click on a button. We will capture the click event and show an alert banner. The alert banner will have a close icon. When we click close, the alert banner will get closed.

We have 3 components

component 1: App

component 2: Button

component3: Basic Alert

App.tsx

import { useState } from "react";
import AlertBasic from "./components/AlertBasic";
import Button from "./components/Button";

function App() {
  const [alertVisible, setAlertVisible] = useState(false);
  return (
    <div>
      {alertVisible && (
        <AlertBasic
          onClose={() => {
            console.log("close event triggered by user");
            setAlertVisible(false);
          }}
        >
          My Magic Alert
        </AlertBasic>
      )}
      <Button
        color="primary"
        onClick={() => {
          console.log("button clicked by user");
          setAlertVisible(true);
        }}
      ></Button>
    </div>
  );
}

export default App;

Button.tsx

import AlertBasic from "./AlertBasic";
interface Props {
  children?: string;
  color?: "primary" | "secondary" | "danger";
  onClick: () => void;
}

const Button = ({
  children = "event click",
  onClick,
  color = "primary",
}: Props) => {
  return (
    <button className={"btn btn-" + color} onClick={onClick}>
      Magic Button
    </button>
  );
};

export default Button;

AlertBasic.tsx

interface Props {
  children: string;
  onClose: () => void;
}
const AlertBasic = ({ children, onClose }: Props) => {
  return (
    <div className="alert alert-primary alert-dismissible">
      {children}
      <button
        type="button"
        className="btn-close"
        onClick={onClose}
        data-bs-dismiss="alert"
      ></button>
    </div>
  );
};

export default AlertBasic;

I am using bootstrap library, but concept is same if you are using any other library or plain html CSS.

In App.tsx we are managing state variable using useState hook and leaving state management to React library when action triggered.

const [alertVisible, setAlertVisible] = useState(false);

Another note: using typescript, we can define optional props and default values for what we can accept.

interface Props {
  children?: string;
  color?: "primary" | "secondary" | "danger";
  onClick: () => void;
}

For example, in button component, if we try to pass a color value other than “primary”, “secondary" or "danger,” we won’t be able to pass, as we defined that the color should be either of those 3.

The rest of the code is straight-forward I would urge you to try this example and understand the basics line by line.

Please share your thoughts and let me know what concepts you would like to understand in detail with real-time scenarios and use cases I will make a note and write an article in this series.

If you have come this far and hope you like this article, you can encourage me with your clap and by sharing this article within your network. That’s all for now.