shameemreza

import { useRef } from 'react';
import { Input } from './Input';

const App = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();

    const value = inputRef.current.getValue();

shameemreza

import { forwardRef, useRef } from 'react';

const Input = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  const getValue = () => {
    return inputRef.current.value;
  }

  const isValid = () => {

shameemreza

import React from "react";

function EmployeeList(props) {
  const employees = props.employees;

  const employeeList = employees.map((employee) => (
    <div key={employee.id}>
      <h2>{employee.name}</h2>
      <p>Age: {employee.age}</p>
      <p>Position: {employee.position}</p>

shameemreza

import React from "react";
import EmployeeList from "./EmployeeList";

function App() {
  const employees = [
    { name: "John Doe", age: 25, position: "Software Engineer" },
    { name: "Jane Smith", age: 32, position: "Product Manager" },
    { name: "Mike Johnson", age: 27, position: "UI/UX Designer" },
    { name: "Sarah Lee", age: 30, position: "Marketing Manager" },
  ];

shameemreza

import React from "react";

function EmployeeList(props) {
  const employees = props.employees;

  const employeeList = employees.map((employee) => (
    <tr key={employee.name}>
      <td>{employee.name}</td>
      <td>{employee.age}</td>
      <td>{employee.position}</td>

shameemreza

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

thead th {
  background-color: #5f9ea0;
  color: white;

shameemreza

import React from "react";
import EmployeeList from "./EmployeeList";

function App() {
  const employees = [
    { name: "John Doe", age: 25, position: "Software Engineer" },
    { name: "Jane Smith", age: 32, position: "Product Manager" },
    { name: "Mike Johnson", age: 27, position: "UI/UX Designer" },
    { name: "Sarah Lee", age: 30, position: "Marketing Manager" },
  ];

shameemreza

import React from "react";

function EmployeeList() {
  const employees = [
    { name: "John Doe", age: 25, position: "Software Engineer" },
    { name: "Jane Smith", age: 32, position: "Product Manager" },
    { name: "Mike Johnson", age: 27, position: "UI/UX Designer" },
    { name: "Sarah Lee", age: 30, position: "Marketing Manager" },
  ];

shameemreza

import React from "react";

function EmployeeList() {
  return (
    <div>
      {/* Render the employee list here */}
    </div>
  );
}

shameemreza

{
    "workbench.iconTheme": "material-icon-theme",
    "files.exclude": {
      "**/*.freezed.dart": false,
      "**/*.g.dart": false,
      "**/.gitkeep": false
    },
    "workbench.colorCustomizations": {
      "[Community Material Theme Darker]": {
        "statusBar.debuggingBackground": "#212121"