I have some state in my application, and I'm trying to reset its value when I click a button.
When the page is rendered for the first time, handleAllProjects is executed:
const [tagPage, setTagPage] = useState({});
const handleAllProjects = () => {
setTagPage({}) // didn't work
const allProjects = `https://api.fluxoresultados.com.br/portfolio/pag?limit=${cardLimit}`;
axios.get(allProjects)
.then(res => {
let cards = res.data
setCards(cards)
setTagPage({1: "", 2: cards[cards.length - 1]["id"]})
setCurrentPage(1)
console.log(currentPage) //line 61
console.log(tagPage) //line 62
})
.catch(err => {
console.log(err)
})
}
I also have the following button click event handler:
const handleSelectButton = (id, tag) => {
if (id === pressedIndex) {
setPressedIndex('')
setTimeout(handleAllProjects, 500);
} else {
setPressedIndex(id)
setTimeout(() => handleTag(tag), 500);
}
} }
The intent of this function is that it will filter projects when clicked for the first time, but when clicked again, it will render everything using the handleAllProjects function.
My page renders 6 projects on cards. setTagPage takes the "id" of the last project, because DynamoDB requires this for pagination. On this page there are filters for projects. When I apply the filter, setTagPage takes another "id". When I remove the filter (I go back to the state where the page renders for the first time). SetTagPage does not reset the value, and brings the "id" of the page as if there were still the filter.
However, the TagPage variable contains a tag, instead of being reset to its initial state. Here's an example of what I'm talking about - I need the console.log statement on line 62 to be the same as before. How can I reset this value back to its initial state?