CODEWITHSUNDEEP
reactjsreact-hooksreact-stategrommet
silasmartin
silasmartin

Reputation: 33

Is there a way to add new fetched elements to an existing state array in React?

I'm currently building a tool which loads videos and shows them with a thumbnail. As soon as I reach the end of the scrollable view, I want the next 40 items to be fetched and added to the existing array. I'm using Grommet's InfiniteScroll for this. Here are important parts of the code:

const [loadedVideos, setLoadedVideos] = useState([]);
const [loadedDetails, setLoadedDetails] = useState(false);
const [offset_start, setOffset] = useState(0);

useEffect(() => {
  // for inital load & different media types
  fetch(
    `url/?token=xyz&offset_start=${offset_start}&per_page=80&record_type=${selectedType}`
  )
    .then((response) => response.json())

    .then((data) => {
      console.log('Offset: ', offset_start);

      setLoadedVideos(data.response.results.records); // puts the videos in the array --> this should be extended with the change of offset_start

      setIsLoading(false);
    })
    .catch((error) => console.log(error));
}, [offset_start, selectedType]);

<InfiniteScroll
  items={loadedVideos}
  step='20'
  onMore={() => {
    setOffset(offset_start + 40);
  }}
>
  {(item) => (
    <Videocard
      key={`${item.record_id}`}
      sendData={gotDetails}
      thumbnail={`${item.thumbnail.url}`}
      title={`${item.title}`}
      databox={`${item.databox_id}`}
      video={item}
    />
  )}
</InfiniteScroll>;

Upvotes: 0

Views: 49

Answers (1)

farhad
farhad

Reputation: 226

setLoadedVideos(currentLoadedVideos => [...currentLoadedVideos, ...data.response.results.records])

Upvotes: 1

Related Questions