React Fundamentals:useState hook scenario: Basics 04
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.