I want to perform same functionality on hardware button press as on doneClick. My app has some tags. There are tags on the screen whose state is maintained in the backend. Upon clicking them, their state toggles. When I change the state of one tag, I can see that it's really changed. But when I don't change the state the below line makes the tags array to empty When I use this
const [allData, changeAllData] = useState([]);
My state is changed on single action. But when I don't select or unselect a tag and come back to previous screen, I see that no tags are selected and allData is just an empty array.
But when I use this
const [allData, changeAllData] = useState(props?.selectedLifeStyle)
My state is not changed on single action. I have to either select two tags, or unselect two tags, select or unselect same or different tags, only then my state changes.
Here is full piece of code:
const LifestyleScreen = (props) => {
const [searchUniqueValue, setSearchUniqueValue] = useState("");
const [searchValue, setSearchValue] = useState("");
const [choice, changeChoice] = useState([]);
// const [allData, changeAllData] = useState([]);
const [allData, changeAllData] = useState(props?.selectedLifeStyle);
const [limit, changeLimit] = useState(10000);
const [offset, changeOffset] = useState(0);
const [fetching, changeFetchingStatus] = useState(false);
const [searchArr, newSearchArr] = useState("");
useEffect(() => {
if (props.user !== null) {
changeFetchingStatus(true);
props.loginChange({ selectedLifeStyle: allData });
debugger;
changeAllData(props.selectedLifeStyle);
let params = {
limit,
offset,
};
getData(
getLifeStyleTags,
params,
(res) => {
console.log(res, "res in lifestyle tag");
changeFetchingStatus(false);
changeChoice(res.lifestyle_tags);
newSearchArr(res.lifestyle_tags);
},
(err) => {
changeFetchingStatus(false);
console.log(JSON.stringify(err, null, 2));
},
props.user ? props.user.api_key : masterKey
);
}
}, []);
const doneClick = () => {
if (allData.length === 0) {
showMessage({
message: "Select at least one lifestyle",
type: "warning",
});
} else if (allData.length > 10) {
showMessage({
message: "Select at most ten lifestyles",
type: "warning",
});
} else {
props.navigation.goBack(null);
props.loginChange({ selectedLifeStyle: allData });
}
};
const saveLifestyles = (item) => {
let counter = 0;
let arr = allData;
if (allData.length > 9) {
for (let i = 0; i < allData.length; i++) {
if (allData[i].id === item.id) {
arr.splice(i, 1);
changeAllData([...arr]);
counter = 1;
break;
}
props.loginChange({ selectedLifeStyle: allData });
if (allData.length == i + 1) {
showMessage({
message: "Only 10 lifestyle tags can be added",
type: "warning",
});
}
}
} else {
for (let i = 0; i < allData.length; i++) {
if (allData[i].id === item.id) {
arr.splice(i, 1);
changeAllData([...arr]);
counter = 1;
props.loginChange({ selectedLifeStyle: allData });
}
}
props.loginChange({ selectedLifeStyle: allData });
if (counter === 0) {
arr.push(item);
changeAllData([...arr]);
props.loginChange({ selectedLifeStyle: allData });
}
}
};
}