Friday 13 November 2020

react-widgets DropDownList dynamic load on demand

I would like to use the awesome react-widgets DropDownList to load records on demand from the server.

My data load all seems to be working. But when the data prop changes, the DropDownList component is not displaying items, I get a message

The filter returned no results

enter image description here

Even though I see the data is populated in my component in the useEffect hook logging the data.length below.

enter image description here

I think this may be due to the "filter" prop doing some kind of client side filtering, but enabling this is how I get an input control to enter the search term and it does fire "onSearch"

Also, if I use my own component for display with props valueComponent or listComponent it bombs I believe when the list is initially empty.

What am I doing wrong? Can I use react-widgets DropDownList to load data on demand in this manner?

//const ItemComponent = ({item}) => <span>{item.id}: {item.name}</span>;

const DropDownUi = ({data, searching, fetchData}) => {

const onSearch = (search) => {
  fetchData(search);
}

// I can see the data coming back here!
useEffect(() => { 
  console.log(data.length); 
 }, [data]); 


<DropDownList
 data={data}
 filter
 valueField={id}
 textField={name}
 onSearch={onSearch}
 busy={searching} />
};


from react-widgets DropDownList dynamic load on demand

No comments:

Post a Comment