CODEWITHSUNDEEP
javascriptreactjs
hegonen
hegonen

Reputation: 123

How to change showing data?

I take datas from json file and there is so much data inside because of this I don't want to show all. In the page I want to show just 20 data and when I click NEXT button i want to see another 20 data. It's working but in the filter function it update filteredDatas but don't update showingDatas

import data from './data.json'
var i = 0
var j = 20

function App() {
const [showingDatas, setShowingDatas] = useState([])
const [filteredDatas, setFilteredDatas] = useState([])

const getDatas = () =>{
 setFilteredDatas(data)
 setShowingDatas(data.slice(0,20))
}

useEffect(()=>{
getDatas()
},[])

const next = () => { 
 i += 20;
 j += 20;
 setShowingDatas(filteredDatas.slice(i,j)) 
}

const filter = () => {
 setFilteredDatas(data.filter(item => item.productCompany ===  "Mavi"))
 i = 0
 j = 20
 setShowingDatas(filteredDatas.slice(0,20))
}

Upvotes: 0

Views: 39

Answers (1)

Mehmet Pekcan
Mehmet Pekcan

Reputation: 288

You can not do this like that, because of React working principles. But if you want to do that I suggest you use useEffect to keep filteredData changes, then in useEffect set it. Like:

useEffect(() => {
   setShowingDatas(filteredDatas)
},  [filteredDatas]);

If you really want to do with useState I suggest you search useState with callback.

Upvotes: 1

Related Questions