I have a huge list of items in a table. In that table, there are some dynamic elements like checkboxes. Which change based on user interaction. I am also using onScroll pagination for the table.
Initially, I load 100 Items and then as the user scrolls and reaches the bottom, I call the backend to fetch the next page. So every time the user scrolls and reaches the bottom, I load more 10 Items and so on and so forth until all data is loaded.
If The user clicks on a checkbox, How do I update only that item, without affecting the order of the list and it should immediately reflect on the front end without affecting the performance.
For example, let's say the user scrolls down to the 2000th item. Then the user checks the 2001st checkbox. How do I update only that item without calling all the items from 1 to 2001 items and setting the state?
itemChecked = id => { const tableContents = [...this.state.tableContents]; tableContents.forEach((content, index) => { if (content.id === id) { tableContents[index].checked = !tableContents[index].checked; } }); this.setState({ tableContents }); }; <div> {this.state.tableContents.map((content, index) => <div key={content.id}> <input type="checkbox" checked={content.checked} onClick={() => this.itemChecked(content.id)}> <div>{content.property1}</div> <div>{content.property2}</div> <div>{content.property3}</div> <div>{content.property4}</div> </div> )} </div>Are you expecting something like this?