Александр

case ADD_CATEGORY:
    addCategory(
-       state,
+       newState,
        action.category
    );
    break;

И в других подобных местах тоже. Кстати, копировать можно и так let newState = { ...state };.

А хоть какой-то код имеется? Без кода как пальцем в небо тыкать. Но, можете использовать нечто такое.

<form action="some_url" method="POST">
	<input type="text" name="username">
	<button>Submit</button>
</form>

const form = document.querySelector('form');
const users = ['John', 'Emily', 'Bruce', 'Alice'];

form.addEventListener('submit', event => {
	const input = form.querySelector('input[type="username"]');
	const index = users.indexOf(input.value);

	if (index === -1) {
		event.preventDefault();
	} else {
		input.value = index;
	}
});

UPD: Пример на React.

const fetchData = () => {
    fetch('...')
        .then(response => response.json())
        .then(({ group }) => {
            this.setState({
                data: group,
                car: Object.keys(group)[0]
            }, this.filter);
        })
        .catch(error => {
            console.log('404 Not Found');
        });
};

Как бы у всех h1-6 и p элементов есть вертикальные отступы.

А если кука будет HTTP Only, как Вы собираетесь ее прочесть на клиенте?

Лучше переделать структуру:

[
	{
		type: 'Button',
		props: {
			label: 'Ok'
		}
	},
	{
		type: 'Card',
		props: {
			label: 'News',
			Image: 'request...'
		}
	},
	{
		type: 'TextInput',
		props: {
			placeholder: 'Hello'
		}
	}
];

Тогда можно будет в методе render сделать так:

{{page.map(element => <element.type {...element.props} />)}}

Как-то так, наверное.