Concatenate dynamic id with data

[madsongr]

Is there a way to concatenate a number (dynamic created id from dynamic created inputs) to data in submit function?

I'm creating new inputs dynamically inside an array and each input will have its own id and register{} name.

To do that, I'm using index value from array.map():

export function RegisterTrips() {

const { register, handleSubmit, formState: { errors }, reset } = useForm();
const [counter, setCounter] = useState(1);


const createDate = () => {
   setCounter(counter + 1);
   console.log(counter);
};

const registerTrip = (data: any) => {

    const formData = new FormData();

    let i;
    let s;
    let trip_start_date;
    const dates = [];
    for (i = 0; i < counter; i++) {

        console.log(i);
        console.log(data.trip_start_date0);
        console.log(typeof (data.trip_start_date0));

        s = i.toString();
        trip_start_date = data.trip_start_date + s;
        // dates.push("trip_start_date", data.trip_start_date.${ i });

        console.log(data.trip_start_date0);
        console.log(trip_start_date);
        // console.log(dates);
     }

}

return(

...

{
    Array.from(Array(counter)).map((e, index) => {
        return (
          <div className = "flex flex-col gap-2 lg:flex-row w-full">

            <div className = "w-full">
          
                <label htmlFor = {`trip_start_date${index}` className = "block mb-2 text-sm text-slate-500"> Trip Date </label>
                    
                <input
                    type = "date"
                    className = "w-full px-2 py-2 text-sm text-slate-600 border border-slate-300 focus:border-slate-400 focus:outline-none rounded-lg"
                    id = {`trip_start_date${index}`}
                    {...register(`trip_start_date${index}`, {required: false})}
                />
            </div>
        )
    })
}

<div className="flex justify-end mt-4 w-full">
   <button type='button' className="text-sm text-blue-500 underline cursor-pointer underline-offset-4 active:text-blue-400" onClick={createDate}>Add new date +</button>
</div>

...

)
}

In registerTrip() function I'm trying to add each input value to an array concatenating counter number to data.trip_start_date to be able to get the corresponding value from the input but this process is not working.

I'm not able to concatenate them even if I convert var i to string.

If I do console.log(data.trip_start_date0) I can get the value but when I do console.log(data.trip_start_date + s) I get undefined0, undefined1, ...

Is this the correct way to do that or should I do it differently?

[madsongr]

Issue solved changing:

trip_start_date = data.trip_start_date + s;

to:

trip_start_date = data["trip_start_date" + i.toString()];