How to populate React Select with JSON data?

Question

How to populate options in react-select using the below JSON data which doesn't have value and label properties?

[       
    {
        "sortCode": "55-77-42",
        "accountNumber": "08488234",
        "accountType": "Savings Account",
        "accountName": "Mannuel Sam"
    },
    {
        "sortCode": "12-43-98",
        "accountNumber": "12365432",
        "accountType": "Savings Account",
        "accountName": "John Cena"
    },
    {
        "sortCode": "87-20-51",
        "accountNumber": "76491234",
        "accountType": "Savings Account",
        "accountName": "Shweta Pandey"
    },
    {
        "sortCode": "56-73-39",
        "accountNumber": "09865479",
        "accountType": "Savings Account",
        "accountName": "Prerna Singh"
    }
]

What specific part do you need help with? Is it the functional component part or populating data? Please post what you've tried already. — jeffkmeng
– jeffkmeng, Commented Mar 4, 2021 at 6:00
What do you want that react select to look like? What should be the dropdown labels and values? You have 4 values in each element, a dropdown like react select only takes 2. — codemonkey
– codemonkey, Commented Mar 4, 2021 at 6:10

Ajeet Shah · Accepted Answer · 2021-03-04 06:31:23Z

7

You can provide getOptionLabel and getOptionValue props to react-select:

import React from "react";
import Select from "react-select";

const options = [
  {
    sortCode: "55-77-42-56",
    accountNumber: "0848890234",
    accountType: "Savings Account",
    accountName: "XYZ Sam"
  }
  // ...
];

export default () => {
  const [value, setValue] = React.useState({});

  return (
      <Select
        name="accounts"
        options={options}
        value={value}
        onChange={setValue}
        getOptionLabel={(option) => option.accountName}
        getOptionValue={(option) => option.accountNumber} // It should be unique value in the options. E.g. ID
      />
  );
};

Demo

edited Mar 4, 2021 at 6:31

answered Mar 4, 2021 at 6:14

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to populate React Select with JSON data?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related