Реактивный поиск, вставка независимых данных WordCloud для каждого отображаемого поиска

Question

Все, я в некотором роде новичок в React.js. Я надеюсь, что вы можете помочь мне с этой сложной задачей, или, я бы сказал, вызов моего проекта, я сейчас создаю поиск данных для профилей Instagram, показывая аналитические данные соответствующего профиля, прямо сейчас Я извлекаю данные в Appbase с помощью JSON, который я извлек из Kibana ElasticSearch. Вскоре я собираюсь напрямую подключить Elastic Search и получить данные оттуда, но это еще одна история. Мой вопрос, как я могу передать JSX-компонент в конкретный пользователь, в этом случае, будет параметр функции

{res.Nombre} · {res.Engagement} гости

Я хочу вставить данные WordCloud для каждого

{res.Nombre} · {res.Engagement}

это код компонента WordCloud.

Вы можете увидеть код App.js здесь, и компонент Wordcloud в изображении

      <ReactiveBase
    app="FactsFichas1"
    credentials="xxxxx">

    <div style={{ display: "top", flexDirection: "row", }}>
                    <div style={{ display: "top", flexDirection: "row", width: "100%",  }}>

                        <CategorySearch
                            componentId="searchbox"
                            dataField="Nombre"
                            categoryField="Nombre.keyword"
                            placeholder="Nombre del Influencer"

                        />
                <MultiDropdownRange
                innerClass={{
                  select: 'select-margin',
                  title: 'title-margin',

              }}
                className='Margins'
                componentId="PriceSensor"
                dataField= "Followers"
                data={
                        [{"start": 917.506, "end": 323.875, "label": "Top 3 con mas Followers"},
                        {"start": 0, "end": 0, "label": "Engagement"},
                        {"start": 0, "end": 0, "label": "Nombre"},
                        {"start":0, "end": 0, "label": "Datos"}]
                    }
            defaultSelected={["Top 3 con mas Followers"]}
            placeholder="Seleccionar Filtros"
            filterLabel="Price"
        />
    </div>
    <ResultList
        innerClass={{
            listItem: 'height-width',
            list: 'theheightandwidth',
            image: 'image-style',
        }}
        className='Sizes'
        componentId="results"
        title="Results"
        sortBy="desc"
        dataField="Followers"
        from={0}
        size={1000}
        pagination={true}
        react={{
            and: ["results", "PriceSensor", "searchbox"]
        }}
        onData={(res) => {
                        return {
                            image: res.Profile_Pic,
                            title: "Tier1",
                            description:  (
                            <div>
                                <div className="Tier1">Followers {res.Followers}</div>
                                <p>{res.Nombre} · {res.Engagement} guests</p>\
                                <p>{res.Bio}</p>
                                <MyWordCloud/>
                            </div>
                            ),
                        }
        }}
        style={{
                width: "60%",
                textAlign: "center"
        }}/>
        </div>
      <div></div>
    </ReactiveBase>
    );
}

приложение по умолчанию для экспорта;