How to implement react-widgets dropdownlist in reactjs

Question

I am trying to add dropdownlist in my reactjs project. My data are coming from api which looks something like this.

In dropdown list i have to display colours and sizeType in dropdown list.

I tried doing this but it is not working.

  const data = [props.data];
  return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title}
        className="drop-down"
        data={data}
      />
    </Grid>

Keep in mind every data that you want to put in dropdown should have a unique id, so you should either create it yourself and make an array of `colours` and `sizeType` or ask your backend developer to put each of them in the array with unique ids. — SMAKSS, Apr 18 '20 at 03:40
@SMAKSS can please suggest me a way so that i can do it myself. — aditya kumar, Apr 18 '20 at 03:42
I just post an answer that may help you with it, please let me know if you got any problem with it. — SMAKSS, Apr 18 '20 at 04:31

score 1 · Answer 1 · answered Apr 18 '20 at 03:47

At first you should split your colors string to array

const colorsArray = data.colors.split(',');

then pass it like data attribute

  return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title}
        className="drop-down"
        data={colorsArray}
      />
    </Grid>

SMAKSS · Accepted Answer · 2020-04-18T04:10:37.280

If we suppose that props.data you provided is the actual data that you received from API.

Destructuring our actual data

Since the actual data is Object itself we can access the colours and sizeType property within them just like this:

const colours = data.colours;
const sizeType = data.sizeType;

Making an array of our destructured data

Since the colours and sizeType itself are string we should make an array of them to pass it to the DropdownList as the data, so we can do it as below:

const coloursArray = data.colours.split(',');
const sizeTypeArray = data.sizeType.split(',');

NOTE: Keep in mind each array got his unique indexes so we don't have to create a unique id by ourself and the DropdownList will use it as it unique id for distinction, but the for using best practices we should provide the unique ids for each dropdown and data by using UUID to keep the distinction much more clear. For more information about UUID, you can read this post.

NOTE 2: Since the string attribute that we wanted are splitting with , we can simply use the comma symbol as the split function input. You can read more about the split function here.

Final output

So this will be the final return that you have provide for your component:

return (
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title} //Title for colours dropdown
        className="drop-down"
        data={coloursArray}
      />
    </Grid>
    <Grid xs={12} className="sort" container>
      <DropdownList
        style={{ height: "auto" }}
        placeholder={props.title} //Title for colours dropdown
        className="drop-down"
        data={sizeTypeArray}
      />
    </Grid>
)

How to implement react-widgets dropdownlist in reactjs

2 Answers2

Destructuring our actual data

Making an array of our destructured data

Final output