javascript - How to populate React Select with JSON data? - Stack Overflow

admin管理员组

文章数量:1337125

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"
    }
]

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"
    }
]

• javascript
• reactjs
• react-select

Share Improve this question Follow edited Apr 18, 2021 at 15:45 Ajeet Shah 19.9k99 gold badges6464 silver badges104104 bronze badges asked Mar 4, 2021 at 5:58 Ridhima GuptaRidhima Gupta 3111 silver badge22 bronze badges 3

• What specific part do you need help with? Is it the functional ponent part or populating data? Please post what you've tried already. – 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 Commented Mar 4, 2021 at 6:10
• 1 Yes it does,thank you – Ridhima Gupta Commented Mar 19, 2021 at 8:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptHow to populate React Select with JSON dataStack Overflow