Dynamic object state control for React Components

MyComponent.jsx

export default const MyComponent => () => {
  const [formData, setFormData] = useState({});
  
  
  const removeFormData = (path) => {
    setFormData(prev => {
      const newData = structuredClone(prev);
      const keys = path.split(".");

      let obj = newData;

      keys.forEach((key, idx) => {
        const isLast = idx === keys.length - 1;

        // Convert numeric keys to actual numbers
        const numericKey = !isNaN(Number(key)) ? Number(key) : key;

        if (isLast) {
          // If final key is an array index → remove from array
          if (Array.isArray(obj) && typeof numericKey === "number") {
            obj.splice(numericKey, 1);
          }
          // Otherwise delete object property
          else {
            delete obj[numericKey];
          }
        } else {
          obj = obj[numericKey];
          if (obj == null) return newData; // path doesn't exist → nothing to remove
        }
      });

      return newData;
    });
  };
  
  const handleInputChange = (path, value) => {
    setFormData(prev => {
      const newData = structuredClone(prev); // or deep clone however you prefer
      const keys = path.split(".");

      let obj = newData;
      keys.forEach((key, idx) => {
        const isLast = idx === keys.length - 1;
        const nextKey = keys[idx + 1];
        const isNextIndex = !isLast && !isNaN(Number(nextKey));

        // If key is array index
        if (!isNaN(Number(key))) {
          key = Number(key);
        }

        if (isLast) {
          obj[key] = value;
        } else {
          if (obj[key] == null) {
            // Create array or object depending on next segment
            obj[key] = isNextIndex ? [] : {};
          }
          obj = obj[key];
        }
      });

      return newData;
    });
  };
  
  //Example
  handleInputChange('test.0.name', 'name'); //set index/value
  removeFormData('test.0.name'); // remove index
  
}