1. Showing the usecase of the UseState hook in various type of i/p component

src/App.tsx

@@ -1,10 +1,10 @@
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import ReactUseStateHooks from "./hooks/usestate/UseStateHook";
 
 function App() {
   return (
-    <div className="App">
-
+    <div className=" h-full w-full">
+      <ReactUseStateHooks />
     </div>
   );
 }

src/hooks/usestate/UseStateHook.tsx

@@ -0,0 +1,50 @@
+import { Button, TextField } from "@mui/material";
+import { useState } from "react";
+import TextFieldComponent from "./component/TextField";
+import RadioGroupComponent from "./component/RadioGroup";
+import SliderComponent from "./component/Slider";
+
+export interface ReactUseStateHooksProps {}
+
+export default function ReactUseStateHooks(props: ReactUseStateHooksProps) {
+  return (
+    <div className="flex-row justify-normal bg-cover m-5 outline-sky-600">
+      <Row1 />
+      <Row2 />
+      <Row3 />
+    </div>
+  );
+}
+
+function Row1() {
+  return (
+    <>
+      <div className="m-4 py-2 text-lg font-mono">
+        1. TextField component with useState hook
+      </div>
+      <TextFieldComponent />
+    </>
+  );
+}
+
+function Row2() {
+  return (
+    <>
+      <div className="m-4 py-2 text-lg font-mono">
+        2. Radio group component with useState hook
+      </div>
+      <RadioGroupComponent />
+    </>
+  );
+}
+
+function Row3() {
+  return (
+    <>
+      <div className="m-4 py-2 text-lg font-mono">
+        3. Slider component with useState hook
+      </div>
+      <SliderComponent />
+    </>
+  );
+}

src/hooks/usestate/component/RadioGroup.tsx

@@ -0,0 +1,51 @@
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from "@mui/material";
+import * as React from "react";
+
+export interface RadioGroupComponentProps {}
+
+export default function RadioGroupComponent(props: RadioGroupComponentProps) {
+  return (
+    <div className="grid grid-cols-3 grid-flow-row gap-2 ">
+      <Radiogroup />
+    </div>
+  );
+}
+
+function Radiogroup() {
+  const [selection, setSelection] = React.useState("female");
+  const handler = (e: any) => {
+    setSelection(e.target.value);
+  };
+
+  return (
+    <>
+      <div className="m-5">
+        <FormControl>
+          <FormLabel>Gender</FormLabel>
+          <RadioGroup value={selection} onChange={handler} row>
+            <FormControlLabel
+              value="female"
+              control={<Radio />}
+              label="Female"
+            />
+            <FormControlLabel value="male" control={<Radio />} label="Male" />
+            <FormControlLabel value="other" control={<Radio />} label="Other" />
+          </RadioGroup>
+        </FormControl>
+      </div>
+
+      <div className=" m-4 p-4 rounded-md text-lg text-end text-sky-800">
+        Selection display:
+      </div>
+      <div className=" m-4 p-4 rounded-md border shadow-lg text-lg text-sky-800">
+        {selection}
+      </div>
+    </>
+  );
+}

src/hooks/usestate/component/Slider.tsx

@@ -0,0 +1,25 @@
+import { Slider } from "@mui/material";
+import * as React from "react";
+
+export interface ISliderComponentProps {}
+
+export default function SliderComponent(props: ISliderComponentProps) {
+  const [sliderValue, setSliderValue] = React.useState(0);
+  const handleSlidingEvent = (e: any) => {
+    setSliderValue(e.target.value);
+  };
+
+  return (
+    <div className="grid grid-cols-3 grid-flow-row gap-2 ">
+      <div className="m-5">
+        <Slider value={sliderValue} onChange={handleSlidingEvent} />
+      </div>
+      <div className=" m-4 p-4 rounded-md text-lg text-end text-sky-800">
+        Percent display:
+      </div>
+      <div className=" m-4 p-4 rounded-md border shadow-lg text-lg text-sky-800">
+        {sliderValue}
+      </div>
+    </div>
+  );
+}

src/hooks/usestate/component/TextField.tsx

@@ -0,0 +1,37 @@
+import { TextField } from "@mui/material";
+import { useState } from "react";
+
+export interface TextFieldComponentProps {}
+
+/**
+ * Ui component showcasing the useState hooks usage.
+ *
+ * @param props TextField props
+ * @returns Ui component
+ */
+export default function TextFieldComponent(props: TextFieldComponentProps) {
+  const [textFieldValue, setTextFieldValue] = useState("");
+  const handleEdit = (e: any) => {
+    setTextFieldValue(e.target.value);
+  };
+
+  return (
+    <div className="grid grid-cols-3 grid-flow-row gap-2 ">
+      <div className="m-5">
+        <TextField
+          label="Name"
+          variant="outlined"
+          fullWidth
+          value={textFieldValue}
+          onChange={handleEdit}
+        />
+      </div>
+      <div className=" m-4 p-4 rounded-md text-lg text-end text-sky-800">
+        Text display:
+      </div>
+      <div className=" m-4 p-4 rounded-md border shadow-lg text-lg text-sky-800">
+        {textFieldValue}
+      </div>
+    </div>
+  );
+}