import React, { useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  const [qualification, setQualification] = useState('');
  const [searchTerm, setSearchTerm] = useState('');

  const handleAdd = () => {
    if (name && address && qualification) {
      setData([...data, { name, address, qualification }]);
      setName('');
      setAddress('');
      setQualification('');
    }
  };

  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
  };

  const filteredData = data.filter(
    (item) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.address.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.qualification.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <div>
        <label>Name:</label>
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </div>
      <div>
        <label>Address:</label>
        <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} />
      </div>
      <div>
        <label>Qualification:</label>
        <input type="text" value={qualification} onChange={(e) => setQualification(e.target.value)} />
      </div>
      <button onClick={handleAdd}>Add to Table</button>

      <div>
        <label>Search:</label>
        <input type="text" value={searchTerm} onChange={handleSearch} />
      </div>

      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Qualification</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.address}</td>
              <td>{item.qualification}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default MyComponent;