Get results from a query

[Sergio094]

Issue Type:
bug

Platform:
Web

Description:
I would like to know if there is way to get the results of a query whenever I use the Multi Dropdown List (for example). I'm trying to show these data in a custom table (so not a reactive search component) and I don't know how to retrieve them.

Minimal reproduction of the problem with instructions:
I found a sandbox that might solve this problem (the results appears in console) but it takes some time to get the data and it's not automatic as I would desire. Maybe is there a better solution with less code?

https://codesandbox.io/s/849x3rj72l

Browser:
Chrome

[bietkul]

In 3.0-rc we have added the render prop which can be used to render the custom UI for list components.
https://opensource.appbase.io/reactive-manual/list-components/multidropdownlist.html#extending

[Sergio094]

In 3.0-rc we have added the render prop which can be used to render the custom UI for list components.
https://opensource.appbase.io/reactive-manual/list-components/multidropdownlist.html#extending

I know, but that's not what I was looking for :( that prop only render a list of the "keys", not a full object with all the data.

This is a screenshot from that sandbox I linked ->

[bietkul]

I'm not sure what do you mean by the full object, are you looking for the unparsed query results?
Or check the render method in ReactiveList
https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html#extending

[Sergio094]

I'm not sure what do you mean by the full object, are you looking for the unparsed query results?

Sorry, I'll try to explain:

Let's say that the object Book has 3 properties: title, author and a publicationYear that has 2010 as value.
Using (for example) a multi dropdown list that contains all the years from 2000 to 2010, choosing 2010 I'd expect to get the data of the book that has 2010 as publicationYear, including title and author. That's what I meant with "full object" :P

I can't use Reactive List, I have to show the data on a table, not a list :/

[bietkul]

I can't use Reactive List, I have to show the data on a table, not a list :/

Use onAllData ( if using 2.0 ) or render ( > 3.0 ) from ReactiveList to render your custom UI which can be anything like a table, list or whatever you want.

[jyash97]

Hey @Sergio094
By using render prop of ReactiveList you can display your data in any UI component. Let's suppose you want your data in a table, you can do something like this:

<ReactiveList
    {...otherProps}
    render={({data}) => (
        <table>
            <tr>
                <th>title</th>
                <th>year</th>
                <th>author</th>
            </tr>
            {data.map(item => <tr key={item._id}>
                <td>{data.title}</td>
                <td>{data.year}</td>
                <td>{data.author}</td>
            </tr>)}
        </table>
    )}
/>

And use react prop to update the ReactiveList data based on the MultiDropdownList value.

[Sergio094]

@jyash97 thanks for the example :) Sadly it throws me the error "data.map is not a function", plus it repeats the columns for each result

[bietkul]

@jyash97 thanks for the example :) Sadly it throws me the error "data.map is not a function", plus it repeats the columns for each result

Can you share the codesanbox link

[Sergio094]

@bietkul @jyash97
nevermind, I solved the problem :) I was still using the "renderItem" prop instead of "render", and for the map I solved using data.data.map
Thanks for the support ^^