Default value not visible

[Jaukub Kaczmarek]

I cannot get the value property od DropDownList component to work. I set the initial value to 2022 but the input is blank until I change it.

<DropDownListComponent
   dataSource={new DataManager(years)}
   placeholder='Rok'
   value={2022}
   onChange={handleChange}
/>


[Sureshkumar P]

Hi Jaukub,

We suspect that you have missed including the field property in the component. so please check the below code example and the documentation link to resolve your facing issue.

Find the code example here:

// maps the appropriate column to fields property

  const fields = { text: 'Game', value: 'Id' };

 

<DropDownListComponent

                id="games"

                dataSource={sportsData}

                ref={(dropdownlist) => {

                  listObj = dropdownlist;

                }}

                fields={fields}

                change={onChange.bind(this)}

                placeholder="Select a game"

                value={value}

                popupHeight="220px"

              />

 

Find the sample here: https://stackblitz.com/edit/react-dimf5n?file=index.js

Find the documentation here: https://ej2.syncfusion.com/react/documentation/drop-down-list/data-binding#1-array-of-simple-data

Regards,

Sureshkumar P

[Jaukub Kaczmarek]

Thanks for the answer,

So if I understand correctly there is no way of setting default value using n array of strings as data source right? I would have to map it to an array of objects and then set the fields property?

[Sureshkumar P]

Jaukub, you can set the preselected value directly without field value when the component renders with an array of string datasource,

Find the code example here:

 const sportsData = [2021, 2022, 2022, 2023, 2024];

  return (

    <div id="dropdowndefault" className="control-pane">

      <div className="control-section">

        <div className="col-lg-8">

          <div className="content-wrapper">

            <div style={{ height: '100px' }}></div>

            <div id="default">

              <DropDownListComponent

                id="games"

                dataSource={sportsData}

                ref={(dropdownlist) => {

                  listObj = dropdownlist;

                }}

                placeholder="Select a game"

                value={2022}

                popupHeight="220px"

              />

 

Find the screenshot here:

Find the modified sample here: https://stackblitz.com/edit/react-dimf5n?file=index.js