DropDownList Default value from Async Source

[Robert]

Hi Stefan, 

I am struggling with this currently. I simply want to default the dropdownlist based on an async data load. I am running a GraphQL query when the component renders, and wish to default the DropDownList to any item in that resulting data array that matches the route parameter passed in (if any).

I cannot find any examples showcasing this.

[Robert]

For some reason, this took me way longer than it should have.

This is how I managed to get it working...dunno if this is the best approach or not.

const AdminRates = withRouter(({ history, ...props }) => {

    const { match: { params: { id = null } } } = props;

    const [defaultRate, setDefaultRate] = useState();
    const [rate, setRate] = useState();
    const { data: { rates = [] }, error, loading } = useQuery(RATES_QUERY);


    // handle the async rates defaulting
    useEffect(() => {
        setDefaultRate(
            rates.filter(rate => rate.id === id)[0]
        );
    }, [id, rates]);


    const handleRateChange = (e) => {
        setRate(e.target.value);
    };

    return (
        <DropDownList
            data={rates}
            textField="name"
            dataItemKey="id"
            defaultValue={defaultRate}
            value={rate}
            onChange={handleRateChange}
        />
    );
});

[Stefan]

Hello, Robert,

This seems as a valid approach as it monitors for changes in the rates collection and the id value.

This will lets know when the request is completed and we have the new values.

It is indeed looking as the best approach to cover this case.


Regards,
Stefan
Progress Telerik