I am trying to implement a MultipleSelectList from this library react-native-dropdown-select-list. And I am saving the selected items in the AsyncStorage of #react-native-async-storage/async-storage. I implemented 2 useState variables: first const [selected, setSelected] = useState([{}]); this is a list of {name : muscleGroup, value : id(s) of the exercise(s)} (this is the object that is saved in the list of viewDataList [see setExerciseViewLists ]). The other useState variable that I have implemented is:
const [selectedCount, setSelectedCount] = useState({ // a list of the number of selected exercises per muscleGroup
Back: 0,
Legs: 0,
Chest: 0,
.....
});
The idea: when I call handleSelect (see handleSelect) from my MultipleSelectList I give it 2 parameters (val and item) val should be the id(s) of the exercise(s) because I defined it as this in my MultipleSelectList (see MultipleSelectList) and the item is one list item from viewDataList.
The problem is: val is for some reason, not an ID or a list of IDs, it is an anonymous function:
function (val) {
var temp = _babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(new
Set([].concat(_babel_runtime_helpers_toConsumableArray__WEBPACK_IMPORTED_MODULE_0___default()(val),
[value])));
return temp;
}
(I don't really understand what this is). Any help would be appriciated.
MultipleSelectList
{viewDataList.map((item, index) => (
<MultipleSelectList
data={item.list.map(listItem => ({
value: listItem.id, //here
}))}
save="value"
setSelected={(val) => handleSelect(val, item)}
selected={selected.map(item => item.value)}
/>
))}
handleSelect/Async saving
const handleSelect = async (val, item) => {
setSelectedCount(prevState => ({
...prevState,
[item.name]: prevState[item.name] + 1, //item.name = muscleGroup
}));
setSelected(prevState => ([
...prevState,
{
name: item.name,
value: val //val should be the ID(s)
},
]));
try {
await AsyncStorage.setItem('selected', JSON.stringify([
...selected,
{
name: item.name,
value: val,
}
]));
await AsyncStorage.setItem('selectedCount', JSON.stringify({
...selectedCount,
[item.name]: selectedCount[item.name] + 1,
}));
} catch (e) {
console.e('Error saving data to AsyncStorage:', e);
}
};
setExerciseViewLists
const setExerciseViewLists = () => {
let list = [];
list.push(
{.....},
{
num: 3,
name: "muscleGroup",
list: [{.....}, { id: "123", exercises : "somthing" }, {.....}]
},
{.....},
);
setViewDataList(list);
};
The issue is not with your data but with the setSelected prop for which you are sending a custom function handleSelect. But if you see the library's documentation, it is clearly mentioned like setSelected is for For Setting the option value which will be stored in your local state. So you can only store the selected values in the local state. The code should be like below inside the component.
const [selectedValues, setSelectedValues] = useState();
return <MultipleSelectList
data={SOME_DATA}
save="value"
setSelected={setSelectedValues}
/>
Related
I have this state
this.state = {
dropdown1: false,
dropdown2: false,
dropdown3: false
}
I want to access to these dropdowns in state using this.setState but the number after 'dropdown' comes from API
onMaca = (ev) => {
this.setState({
dropdown + ev: true
})
}
So I want the key to be dynamic 'dropdown1' for example.
Thanks for your answers
you can access the object property like this object['property name']
onMaca = (ev) => {
this.state['dropdown' + ev]= true;
this.setState({
...this.state
})
}
https://codezup.com/add-dynamic-key-to-object-property-in-javascript/
You can use any of these to set key dynamically. I will try to update the answer with an example in a while for setState.
The state is a JS object, so you can get its keys as usual, like so:
const stateKeys = this.state.keys()
Now you have an array: [ "dropdown1", "dropdown1", "dropdown1" ]
One way to use it would be:
const keysMap = statekeys.map(( item, i ) => return {
key: item,
idx: i,
number: item.replace( /dropdown/, '' )
}
keysMap will look like so: [ { key: 'dropdown1', idx: 0, number "1" }, { key: 'dropdown1', idx: 1, number "2" }, { key: 'dropdown1', idx: 2, number "3" } ]
You can query keysMap for a given dropDownNumber like so:
let k = keysMap.find( kmap => kmap.key = dropDownNumber )
To set the dropdown's state:
this.setState({ k: <whatever> })
I'm trying to implement a file upload feature using native DnD and the browser API.
I have to functions like so:
export function buildFileTree(allObjects) {
let fileTree = {}
allObjects.forEach((item, index) => {
traverseFileTree(fileTree, null, item)
})
return fileTree
}
export function traverseFileTree(fileTree, parent = null, item) {
let parentId = !!parent ? fileTree[parent].id : parent
if (item.isFile) {
item.file(file => {
fileTree[item.fullPath] = {
id: uuidv4(),
name: item.name,
parent_id: parentId,
file: item
}
})
}
if (item.isDirectory) {
fileTree[item.fullPath] = {
id: uuidv4(),
name: item.name,
is_directory: true,
parent_id: parentId,
file: null
}
let dirReader = item.createReader()
dirReader.readEntries(entries => {
entries.forEach((entry, index) => {
traverseFileTree(fileTree, item.fullPath, entry)
})
})
}
}
Which I use like so, and I'm getting very weird results, when I console.log the object, it shows the correct data, but when I try to stringify it, access any other attributes, or iterate over it; it's only showing the first result.
const handleUploadDrop = (files) => {
const finalFiles = buildFileTree(files)
console.log(finalFiles) // This shows the correct data
console.log(JSON.stringify(finalFiles)) // This only shows 1 item!!!
console.log(Object.keys(finalFiles).length) // This prints 1
}
I'm very confused by this and any help would be greatly appreciated.
I'm updating an input field with an onChange event in React.
const handleUpdateText = (id, name, text) => {
const newItems = items.map( item => {
if (item.id === id) {
return {...item, [menuLang][name]:text } // <-- error here at ][
}
return item;
} )
setItems(newItems);
}
name and text and name attribute and value of target input field.
menuLang is a state variable (string, eg "en").
The items are something like this:
{
id: 1,
type: "menuitem",
isVisible: true,
en: {
name: "Salad",
desc: "Fresh, seasonal ingredients",
},
price: "10",
},
Without dynamic destructuring it work fine:
const newItem = {...item}
newItem[menuLang][name] = text;
return newItem;
// instead of: return {...item, [menuLang][name]:text }
Any ideas what's the mistake?
use computed property name
let item={id:1,type:"menuitem",isVisible:!0,en:{name:"Salad",desc:"Fresh, seasonal ingredients"},price:"10"};
console.log(item)
let name = 'name'
let text = "Orange"
let menuLang = 'en'
item = {...item,[menuLang]:{...item[menuLang],[name]:text}}
console.log(item)
I don't think there is a mistake here, but I also didn't think what you want to do is possible via destructuring - I think you have to go down the route of your second example here.
const items = [{id:12,name: 'dj' }];
const handleUpdateText = (id = 12, name='ann', text='sample') => {
const newItems = items.map((item) => {
const obj = {...item};
if (item.id === id) {
return {...obj, [menuLang]: {[name]:[text]}};
}
return obj;
});
console.log('item', newItems);
};```
I have array selectedItems and when I try to update existing object:
i.e. [{lable: "one", uniqueId: 1}, {lable: "two", uniqueId: 1}]
to:
i.e. [{lable: "one", uniqueId: 1}, {lable: "two", uniqueId: 3}]
It replaces the whole array with:
[ { lable: "two", uniqueId: 3 }]
how can I avoid that?
handleChange = (label, uniqueId) => {
const { selectedItems } = this.state
const findExistingItem = selectedItems.find((item) => {
return item.uniqueId === uniqueId;
})
if(findExistingItem) {
selectedItems.splice(findExistingItem);
this.setState(state => ({
selectedItems: [...state.selectedItems, {
label, uniqueId
}]
}))
} else {
this.setState(state => ({
selectedItems: [...state.selectedItems, {
label, uniqueId
}]
}))
}
}
Another approach would be to use the Array#filter and Array#concat functions in tandem, where;
items that don't match on uniqueId are filtered. This substitutes the find() logic of your current solution followed by,
the concat() method being called to append the new "replacement item" to the end of the filtered array
In code that could be achieved like this:
handleChange = (label, uniqueId) => {
const {
selectedItems
} = this.state
this.setState({
selectedItems : selectedItems
/* Filter any existing item matching on uniqueId */
.filter(item => (item.uniqueId !== uniqueId))
/* Append replacement { label, uniqueId } to state array */
.concat([ { label, uniqueId } ])
});
}
Array.find() finds the element in the array and returns its reference.
You can modify the returned object, and then update the state.
Also, you can change the find() condition to find the item by
label or uniqueId based on your needs. To get the output in your
question, you have to find by label not uniqueId.
handleChange = (label, uniqueId) => {
const { selectedItems } = this.state;
const findExistingItem = selectedItems.find((item) => {
// To find by 'label', replace 'uniqueId' below with 'label'.
return item.uniqueId === uniqueId;
})
if(findExistingItem) {
// You are not passing in 'newUniqueId', so only 'label' is updated.
findExistingItem.label = label;
findExistingItem.uniqueId = uniqueId;
}
this.setState(state => ({
selectedItems: selectedItems
}));
}
Live Example:
function handleChange(label, uniqueId) {
const selectedItems = [{label: "one",uniqueId: 1}, {label: "two", uniqueId: 1 }];
const findExistingItem = selectedItems.find(item => {
// Finding by 'label', change to 'uniqueId' if that is what is needed.
return item.label === label;
});
if(findExistingItem) {
findExistingItem.label = label;
findExistingItem.uniqueId = uniqueId;
}
console.log(JSON.stringify(selectedItems));
}
handleChange("two", 3);
If you omit the second argument of .splice (the number of elements to remove), it removes all elements from the index on:
const arr = [1, 2, 3];
arr.splice(0);
console.log(arr);
You might want to only splice 1, and you might want to start at the elements index, not it's value.
You can filter and setState
handleChange = (label, uniqueId) => {
const { selectedItems } = this.state
// filter data if exists other wise return present array
const selectedItem = selectedItems.filter(item => item.uniqueId !== uniqueId)
this.setState({ selectedItems: [...selectedItem, { label, uniqueId }] })
}
Filter slice based on uniqueId an append new if not exists
I think the question is misleading
I think what the OP wants to do is find the label passed in to the function and change the uniqueId of the matching array entry - given the result being [{lable: "two", uniqueId: 3}] would mean that handleChange is being called
handleChange('two', 3);
Given that the logic is more like the following
handleChange = (label, uniqueId) => {
this.setState(state => ({
selectedItems: state.selectedItems.map(item => Object.assign(item, item.lable === label ? {uniqueId} : {}))
});
}
to illustrate this works:
const handleChange = (label, uniqueId) => {
const selectedItems = [{lable: "one", uniqueId: 1}, {lable: "two", uniqueId: 1}];
return selectedItems.map(item => Object.assign(item, item.lable === label ? {uniqueId} : {}))
};
console.log(handleChange('two', 3));
or to "borrow" some nicer code, and FIX it
handleChange = (lable, uniqueId) => {
const { selectedItems } = this.state
const selectedItem = selectedItems.filter(item => item.lable !== lable)
this.setState({ selectedItems: [...selectedItem, { lable, uniqueId }] })
}
Demonstrate it works and produces expected result:
const handleChange = (lable, uniqueId) => {
const selectedItems = [{lable: "one", uniqueId: 1}, {lable: "two", uniqueId: 1}];
const selectedItem = selectedItems.filter(item => item.lable !== lable)
return({ selectedItems: [...selectedItem, { lable, uniqueId }] })
};
console.log(handleChange('two', 3));
I am deleting an one id in an array, how do I setState after filtering it here?
https://codesandbox.io/s/react-example-1m2qn
const Debtors = () => {
const debtors = [
{
id: 1,
name: "John",
relation: "friend",
statement: [
{ id: 1, date: 2010, amount: "1000", purpose: "John" },
{ id: 2, date: 2014, amount: "2000", purpose: "john" }
]
},
,
{
id: 2,
name: "Jack",
relation: "Friend",
statement: [
{ id: 1, date: 2010, amount: "1000", purpose: "jack" },
{ id: 2, date: 2014, amount: "2000", purpose: "jack" }
]
}
];
const [newDebtors, setdebtors] = React.useState(debtors);
const handleDelete = (stat, i) => {
const newList = newDebtors[0].statement.filter(x => x.id !== stat.id);
// How to set debtors here ?
// setdebtors({ ...newDebtors, statement[0]: newList });
console.log(newList)
// How to set debtors here ?
There's two problems:
1) You are iterating off the original debtors object in your render, instead of the newDebtors state you created via useState(), which is why there does not appear to be any UI change.
You need: newDebtors[0].statement.map
2) You need to pass in the item index in your handleDelete() so it knows what item in the array to update. You can have the function do something like this:
In the onClick:
<a
href="javascript:;"
onClick={() => handleDelete(stat, i, 0)}
>
In the handleDelete():
const handleDelete = (stat, i, arrayIndex) => {
const updatedDebtors = newDebtors.map((item, index) => {
if (index === arrayIndex) {
return {
...item,
statement: item.statement.filter(
statement => statement.id !== stat.id
)
};
} else {
return item;
}
});
setDebtors(updatedDebtors);
};
See sandbox for full solution: https://codesandbox.io/s/react-example-x7uoh
You should do it like that:
setdebtors((prevState) => {
let newArray = Array.from(prevState); // Copy the array
// Manipulate the array as you wish
return newArray; // return it
});
The problem is you are mutating the array of "debtors" you need to map through the array of debtors and change any properties in the object.
const handleDelete = (stat, i) => {
const newList = newDebtors.map((debtor, i) => {
if (i === 0) {
debtor.statement = debtor.statement.filter(x => x.id !== stat.id);
}
return debtor;
});
setdebtors(newList);};
An even better approach is to use "useReducer" which is used for mutating more complex pieces of state, like you have here. THe docs are very helpful useReducer
Hmm I dont know what exactly you are trying to do,
Is this what you are looking for?
const handleDelete = (stat, i) => {
const newList = newDebtors[0].statement.filter(x => x.id !== stat.id);
const newFirstItem = {...newDebtors[0],statement: newList}
const newDebtorList = newDebtors.filter(x => x.id !== newFirstItem.id);
newDebtorList.unshift(newFirstItem);
setdebtors(newDebtorList);
}
I know this seems complex but you kinda actually need to do this as you cannot mutate an array in the state...
What I did here is I first created a new statement list(newList), then created a newFirstItem to be set as the new newDebtors[0], then created a new array(newDebtorList) of all the elements of newDebtors except the first one, I modified this array by pushing the newFirstItem to the 0th position(using unshift)
Finally updated the state with this new array...
hope it helps :)
Note: this is for changing the 0th element if you have the id please change the code accordingly