Virtual List React update item

Good afternoon I am trying to update items from the virtual list but it only keeps the first information, when I want to add more data nothing happens

this my code

<List

                className="searchbar-found"

                medialList

                virtualList

                virtualListParams={{

                    items: vlDataa,

                    searchAll,

                    renderExternal,

                    height: theme.ios ? 63 : theme.md ? 73 : 77,

                }}

            >

                <ul>

                    {vlData.items.map((item, index) => (

                        <ListItem

                            menuList={true}

                            key={index}

                            mediaItem

                            subtitle={subtitulo()}

                            title={titulo(item)}

                            style={{ top: `${vlData.topPosition}px` }}

                            virtualListIndex={notificationContext.history.history.indexOf(item)}

                        >

                        </ListItem>

                    ))}

                </ul>

            </List>

Can not see anything related to adding items in your example. How to ask a good question on forum

Hello good night, I was continuing tests and I observe that when I add “renderExternal” it is when it stops adding new items, I share complete code, it could be that the “List” component is not updating the new items

import React, { useState } from ‘react’;

import { Page, Navbar, List, ListItem, BlockFooter } from ‘framework7-react’;

export default (parent) => {

const [vlData, setVlData] = useState({

    items: [],

  });    

const songs = ['Yellow Submarine', "Don't Stop Me Now", 'Billie Jean', 'Californication'];

const authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];

const [items, setItems] = useState([

    {

        title: 'Yellow Submarine',

        author: 'Beatles',

        cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',

    },

    {

        title: "Don't Stop Me Now",

        author: 'Queen',

        cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',

    },

    {

        title: 'Billie Jean',

        author: 'Michael Jackson',

        cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',

    },

]);

const loadMore = () => {

    setTimeout(() => {

        const picURL = `https://cdn.framework7.io/placeholder/abstract-88x88-${Math.floor(Math.random() * 10) + 1

            }.jpg`;

        const song = songs[Math.floor(Math.random() * songs.length)];

        const author = authors[Math.floor(Math.random() * authors.length)];

        items.push({

            title: song,

            author,

            cover: picURL,

        });

        setItems([...items]);

    }, 1000);

};

const setNotification = function (dataNotification) {

    loadMore()

}

const module = {

    'alarm': {

        'tUpdate': setNotification

    }

}

parent.props.Worker.workerCallBack['socketList'] = function (data) {

    console.log(data);

    if (data.data.message !== undefined) {

        if (data.data.message.response !== undefined) {

            if (data.data.message.response.data !== undefined) {

                //console.log(data.data);

                if (data.data.message.response.data != undefined) {

                    if (module[data.data.message.module] != undefined) {

                        if (module[data.data.message.module][data.data.message.action] != undefined)

                            module[data.data.message.module][data.data.message.action](data.data.message.response.data)

                    }

                }

                else

                    console.log("Error");

                return 0;

            }

        }

    }

}

const searchAll = (query, searchItems) => {

    const found = [];

    for (let i = 0; i < searchItems.length; i += 1) {

        if (

            searchItems[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||

            query.trim() === ''

        )

            found.push(i);

    }

    return found; // return array with mathced indexes

};

const renderExternal = (vl, newData) => {

    setVlData({ ...newData });

  };

return (

    <Page ptr ptrMousewheel={true} onPtrRefresh={loadMore}>

        <Navbar title="Pull To Refresh"></Navbar>

        <List mediaList

            virtual

            virtualListParams={{

                items,

                height: 63,

                renderExternal

            }}

        >

            {vlData.items.map((item, index) => (

                <ListItem key={index} title={item.title} subtitle={item.author}>

                    <img slot="media" src={item.cover} width="44" />

                </ListItem>

            ))}

            <BlockFooter>

                <p>

                    Just pull page down to let the magic happen.

                    <br />

                    Note that pull-to-refresh feature is optimised for touch and native scrolling so it

                    may not work on desktop browser.

                </p>

            </BlockFooter>

        </List>

    </Page>

);

};

After reviewing the api code I see that for this case it is necessary to force update the List component, my solution was to add this line on file node_modules\framework7-react\esm\components\list.js

let tUpdateList = false

if (virtualListParams) {

if (virtualListParams.tUpdateList)

  tUpdateList = virtualListParams.tUpdateList

}

useIsomorphicLayoutEffect(function () {

onDestroy();

onMount();

return onDestroy;

}, [tUpdateList]);

thanks Vladimir Kharlampidi, framework7 is a excelent api…