How to pass json api data to react-select RRS feed

  • Question

  • Hi experts,

    I am trying to pass my json data from an api call to populate the react-select, so I can select more than one option at the same time.

    Any help will be really appreciated.

    here is my react code

    import ReactDOM from 'react-dom'
    import React, {Component} from 'react'
    import Select from 'react-select'
    export default class TNSNames extends Component {
      state = {
        values: [],
      componentDidMount() {
      fetchData = async () => {
        await fetch('https://localhost:5001/tnsnames/all')
          .then(res => res.json())
          .then(res =>
              values: res.Data
          .catch(error => console.log(error));
      render() {
        let option = []
        if (this.state.values.length > 0) {
          this.state.values.forEach(item => {
            let tnsNames = {}
            tnsNames.value = item.name
            tnsNames.label = item.name
        return (
            <Select options={option} />

    Monday, November 16, 2020 6:23 PM


All replies

  • Hi Seham_1981,

    Thank you for posting here.

    In order to help you find the correct forum to go ask questions, I have moved the thread to 'where is the forum for' forum.

    Thank you for your understanding.

    Best Regards,

    Xingyu Zhao

    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, November 17, 2020 2:00 AM
  • I'd try asking for help over here.




    Regards, Dave Patrick ....
    Microsoft Certified Professional
    Microsoft MVP [Windows Server] Datacenter Management

    Disclaimer: This posting is provided "AS IS" with no warranties or guarantees, and confers no rights.

    • Proposed as answer by Guido Franzke Tuesday, November 17, 2020 6:49 AM
    • Marked as answer by Guido Franzke Monday, November 23, 2020 7:16 AM
    Tuesday, November 17, 2020 2:51 AM