Target requires 1 element(s) but source may have fewer

Question

I am trying to create a form in react with typescript. I want to create an array of objects through the form. Here is the interface.

interface FormValues {
    featureList: [
        {
            featureName: string,
            deliverables: string[]
        }
    ];
}

I have created the function for capturing the data for these 2 fields.

// Function to handle the feature list and its inner components
    const handleFeatureListChange = (
        index: number,
        event: React.ChangeEvent<HTMLInputElement>
    ) => {
        const { name, value } = event.target;
        const featureList = [...formValues.featureList];
        if (name === 'featureName') {
            featureList[index] = { ...featureList[index], featureName: value };
        } else {
            const deliverables = [...featureList[index].deliverables];
            deliverables[Number(name)] = value;
            featureList[index] = { ...featureList[index], deliverables };
        }
        setFormValues({ ...formValues, featureList });
    };

    // Function to add the featuresName
    const handleAddFeature = () => {
        setFormValues({
            ...formValues,
            featureList: [...formValues.featureList, { featureName: '', deliverables: [''] }],
        });
    };

But getting the error on setFormValues({ ...formValues, featureList }); inside handleFeatureListChange function. Error is:

Type '[{ featureName: string; deliverables: string[]; }, { featureName: string; deliverables: string[]; }]' is not assignable to type '[{ featureName: string; deliverables: string[]; }]'. Source has 2 element(s) but target allows only 1.

And ...formValues, featureList: inside handleAddFeature function on featureList I am getting the error. Error is:

Type '[{ featureName: string; deliverables: string[]; }, { featureName: string; deliverables: string[]; }]' is not assignable to type '[{ featureName: string; deliverables: string[]; }]'. Source has 2 element(s) but target allows only 1.

Here is my code react code for adding the values:

<div className='mb-3'>
  <div className="row">
    {formValues.featureList.map((feature, index) => (
      <div key={index}>
        <input name="featureName" value={feature.featureName} onChange={(e) => handleFeatureListChange(index, e)} />
          {feature.deliverables.map((deliverable, dIndex) => (
            <input key={dIndex} name={`${dIndex}`} value={deliverable} onChange={(e) => handleFeatureListChange(index, e)} />
          ))}
        </div>
      ))}
        <button type="button" onClick={handleAddFeature}>Add Feature</button>
    </div>
  </div>

I am trying to get this type of output:

"featureList": [
        {
          "featureName": "Administration Services",
          "deliverables": ["Provision, build and configure new server infrastructure.", "Add, modify, and delete System configuration.", "Server Compute Resource Management."]
        },
        {
          "featureName": "Maintenance and Support Services",
          "deliverables": ["Provide 24X7 ITIL based helpdesk to manage incidents, changes, and troubleshoot problems.", "Provide incident management support which includes:", "Call logging, tracking, and reporting.", "Incident escalation and circumvention according to documented SOP.", "Employ standardized change management processes and procedures for prompt and efficient handling of all changes.", "Provide problem management for failures preventing incident recurrence through comprehensive RCA and permanent fixes"]
        },
        {
          "featureName": "Monitoring and Alerting Services",
          "deliverables": ["Monitor server utilizations."]
        },
        {
          "featureName": "Reporting Services",
          "deliverables": ["Service availability", "Call statistics and incident reports."]
        },
]

score 0 · Answer 1 · answered Apr 04 '23 at 13:20

0

interface FormValues {
    featureList: [
        {
            featureName: string,
            deliverables: string[]
        }
    ];
}

You are typed your featureList as a tuple that must have exactly one element in the array, it means that there cannot be more than one object in the array

this should do the trick:

interface FormValues {
    featureList: Array<{
        featureName: string,
        deliverables: string[]
    }>;
}

or:

interface IFeatureList {
     featureName: string,
     deliverables: string[]
}

interface FormValues {
     featureList: IFeatureList[]
}

answered Apr 04 '23 at 13:20

Тамирлан Жукасаев

34
6

Thanks for the reply, but still it didn't work. – karmanshu swami Apr 05 '23 at 04:16
are you sure? maybe there is another error now? – Тамирлан Жукасаев Apr 05 '23 at 15:54
Yeah at that time got other errors. The error was not in the interface rather it was in my function. So need to work on the functions. Interface was correct. – karmanshu swami Apr 06 '23 at 06:11

Target requires 1 element(s) but source may have fewer

1 Answers1