How to push data to an array state machine

[vicentematus]

My idea is to push data to an array with the same form. So everytime i press send, it appends it to the array.

Here is my following state:

createStore({
    data: {
        id: '1',
        role: '',
        name: '',
        mail: '',
        addictions: [],
        phisiology_logs: [],
        achievements: [],
    },
});

And this is my form (using react-hook-form)

const onSubmit = (data) => {
    console.log('state es, ', state.data.counter);

    actions.updateAction(data);
    console.log('data', data);
};

return (
    <div className="">
            <form action="" onSubmit={handleSubmit(onSubmit)}>
                <div className="flex items-start space-x-4 pb-">
                    <div className="flex-shrink-0"></div>
                    <div className="flex-1 min-w-0">
                        <div className="overflow-hidden border border-gray-300 rounded-lg shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500">
                            <label htmlFor="comment" className="sr-only">
                                Agrega tu comentario
                            </label>
                            <textarea
                                rows={3}
                                name=""
                                className="block w-full py-3 border-0 resize-none focus:ring-0 sm:text-sm"
                                placeholder="Add your comment..."
                                defaultValue={''}
                                {...register(
                                    `phisiology_logs[0].description`,
                                    {
                                        required: 'Required',
                                    }
                                )}
                            />
                        </div>
                        <select
                            {...register(
                                `phisiology_logs[0].feel`,
                                {
                                    required: true,
                                }
                            )}
                            className="block px-2 py-2 border border-gray-200 rounded-lg shadow-sm focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500"
                        >
                            <option value="5">😁 Feliz</option>
                            <option value="4">😀 Bien</option>
                            <option value="3">😐 Neutro</option>
                            <option value="2 ">😥 Triste </option>
                            <option value="1">😭Muy Mal</option>
                        </select>
                        <input
                            type="date"
                            className="hidden"
                            defaultValue={
                                new Date().toISOString().split('T')[0]
                            }
                            placeholder="date"
                            {...register(
                                `phisiology_logs[0].date`,
                                {
                                    required: true,
                                }
                            )}
                        />
                        <button
                            type="submit"
                            className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                        >
                            Send
                        </button>
                    </div>
                </div>
            </form>
    </div>
);

You can see im just adding this information to the index 0 of the phisiology_logs array. How can i append or push data to the state (data.phisiology_logs[]) object? So everytime i press 'Send' it pushes data to the array.

[bluebill1049]

Just make an action to push the data into the little state machine

function appendAction(state, payload) {
  return {
    ...state,
    data: data.push(payload)
  }
}

[vicentematus]

Should i keep the index [0] or should i change it to work?

Is this okay?:

{...register(
    `phisiology_logs[0].date`,
    {
        required: true,
    }
)}