Untitled

import React, { useState } from "react";
import EditableLine from "./EditableLine";

export default function EditableSheet(props) {


    const removeData = (index) => {
        console.log(data);
        setData(data.filter((item, i) => i !== index));
    }

    const [data, setData] = useState([]);

    const addRowRef = React.useRef(null);
    // add listeners to the form to submit it

    const addData = () => {
        let newData = [];
        let inputs = addRowRef.current.getElementsByTagName("input");
        for (let i = 0; i < inputs.length; i++) {
            newData.push(inputs[i].value);
        }
        setData([...data, newData]);
        console.log(data);

        // clear the inputs
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].value = "";
        }
    }

    React.useEffect(() => {
        setData(props.data)
    }, []);

    return (
        <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <thead className="bg-gray-50 dark:bg-gray-800">
                    <EditableLine data={props.headers} header />
                </thead>
                <tbody className="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                    {props.data.map((item, index) => (
                        // add index to the item
                        item.index = index,

                        <EditableLine
                            data={item}
                            rowClass={index % 2 === 0 ? "even" : "odd"}
                            removeData={removeData}
                        />
                    ))}
                    <tr className="bg-gray-50 dark:bg-gray-700" ref={addRowRef}>
                        {
                            props.headers.map((item, index) => (
                                <td className="px-6 py-4 whitespace-nowrap">
                                    <input
                                        type="text"
                                        name={item}
                                        id={item}
                                        className="border rounded-md px-3 py-2 w-full"
                                    />
                                </td>
                            ))
                        }
                        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <button
                                type="button"
                                className="text-indigo-600 hover:text-indigo-900"
                                onClick={addData}
                            >
                                Add
                            </button>
                        </td>
                        {/* <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <button
                                type="button"
                                className="text-indigo-600 hover:text-indigo-900"
                                onClick={() => {
                                    setData(data.slice(0, data.length - 1));
                                }}
                            >
                                Remove
                            </button>
                        </td> */}
                    </tr>
                </tbody>
            </table>
        </div >
    )
}