I have a function called onClick of a div that calls a dispatch function, and passes in the target value into it (i.e e.target.value
). The value being passed in, is being stored in an array.
However, I noticed something weird going on. In the array the value is being passed into, the first value is stored wrongly.
For instance if I pass in 'hello'
, in the array, it is stored as ['h','e','l','l','o']
. And this only happens with the first value that is passed in, the rest are stored properly.
This is my function, the one called onClick;
const handleSelectedFilters = (e: any) => {
dispatch(
actions.storeData({
name: data.name,
values: e.target.value,
}),
);
}
And this is the action in my reducer file;
export interface DataState {
name: string,
values: Array<string>,
}
export interface FilterState {
storedData: DataState[];
}
applyData: (
state,
action: PayloadAction<DataState>,
) => {
state.storedData.push({
name: action.payload.name,
values: [...action.payload.values],
});
},
Please any help will be appreciated as I am really stuck. What do I need to do differently?
CodePudding user response:
You're storing your values
as values: [...action.payload.values]
If you do:
var text: String = "hello":
console.log([...text]);
You will see how the spread operator placed inside the array will split your string into an array.
Solution
Just save it as values: action.payload.values