Untitled

import React, { useState } from 'react';
import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid';
import { ToastContainer, toast } from 'react-toastify';
import { st_home_post } from '../../services/Apis';

const InputableList = (props) => {
  const [items, setItems] = useState([]);
  const [inputValue, setInputValue] = useState('');

  
    setItems(props.list)
  
//console.log('my array= ',props.list);
 

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAddItem = async () => {
    if (inputValue.trim() !== '') {
      setItems([...items, inputValue]);
      setInputValue('');

      const myList = {
        email: props.emailID,
        subList: items,
        type: 'List'
      }

      const res = st_home_post(myList);

      if (res.status !== 200) {
        toast.error('Error While Adding New Subject')
      }


    } else {
      toast.error('Error While Adding New Subject')
    }
  };

  const handleRemoveItem = (index) => {
    const updatedItems = items.filter((_, i) => i !== index);
    setItems(updatedItems);
  };

  return (
    <>
    <ToastContainer/>
    <div className="space-y-1">
      <div className="flex" style={{ width: '600px' }}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="Enter an item"
          className="border border-gray-300 rounded-lg px-4 py-2 w-96"
        />
        <button
          onClick={handleAddItem}
          className="ml-2 flex items-center justify-center bg-teal-500 hover:bg-teal-700 text-white rounded-full w-8 h-8 mt-1"
        >
          <PlusIcon className="h-6 w-6" />
        </button>
      </div>

      {items !== undefined && (
              <ul className="list-disc list-outside pl-2" style={{ width: '528px' }}>
                {items.map((item, index) => (
                  <li key={index} className="flex">
                    <span style={{ fontSize: '20px' }}>
                      <span className="" />
                      &#9679; {item}
                    </span>

                    <button
                      onClick={() => handleRemoveItem(index)}
                      className="ml-auto flex items-center justify-center bg-red-500 hover:bg-red-600 text-white rounded-full w-7 h-7 mt-0.5"
                    >
                      <XMarkIcon className="h-5 w-5" />
                    </button>
                  </li>
                ))}
              </ul>
      )}

    </div>
    </>
  );
};

export default InputableList;