javascript - searchable dropdown in react - Stack Overflow

admin管理员组

文章数量:1353655

I have below list in react.

<select
    id="sponsor" 
    name="sponsor"
    className="form-control"
    placeholder="Sponsor"
    }
    >
    <option value="" selected>Please select the sponsor</option>
     {
     active && result.map((sponsor:Sponsor,index:number)=>
          <option  value={sponsor.id} >{sponsor.name}</option>    
      )
    }

</select>

it is working perfectly fine. now I need to change it to searchable list. I did below.

     import VirtualizedSelect from 'react-virtualized-select'
    import "react-virtualized-select/styles.css";
    import 'react-virtualized/styles.css'
     

 <VirtualizedSelect
        id="sponsor" 
        name="sponsor"
        className="form-control"
        placeholder="Sponsor"
        options={ active && result.map((sponsor:Sponsor,index:number)=>
            {sponsor.name}
          
        )}

     >
       </VirtualizedSelect> 

now nothing is ing in list. basically my requirement is to make list searchable and insert data of API into that list.

Could you please help me with same? Any other option will also be very helpful

Edit1:-

I need list like below. first line "Please choose sponsor"

I have below list in react.

<select
    id="sponsor" 
    name="sponsor"
    className="form-control"
    placeholder="Sponsor"
    }
    >
    <option value="" selected>Please select the sponsor</option>
     {
     active && result.map((sponsor:Sponsor,index:number)=>
          <option  value={sponsor.id} >{sponsor.name}</option>    
      )
    }

</select>

it is working perfectly fine. now I need to change it to searchable list. I did below.

     import VirtualizedSelect from 'react-virtualized-select'
    import "react-virtualized-select/styles.css";
    import 'react-virtualized/styles.css'
     

 <VirtualizedSelect
        id="sponsor" 
        name="sponsor"
        className="form-control"
        placeholder="Sponsor"
        options={ active && result.map((sponsor:Sponsor,index:number)=>
            {sponsor.name}
          
        )}

     >
       </VirtualizedSelect> 

now nothing is ing in list. basically my requirement is to make list searchable and insert data of API into that list.

Could you please help me with same? Any other option will also be very helpful

Edit1:-

I need list like below. first line "Please choose sponsor"

• javascript
• reactjs
• react-hooks
• react-select
• react-virtualized

Share Improve this question Follow edited Mar 10, 2022 at 15:26 Shruti sharma asked Mar 3, 2022 at 11:45 Shruti sharmaShruti sharma 21199 gold badges3333 silver badges9292 bronze badges 4

• 3 alert(result); wont print anything because setResultis asynchronous, try printing the result like useEffect(()=>{console.log(result)} , [result]) – Faizal Hussain Commented Mar 3, 2022 at 11:50
• can you put a screenshot of error you are getting – Dharmik Patel Commented Mar 3, 2022 at 11:54
• 1 Within the return and in result.map, instead of {sts}, please try with: {sts.request_status} and see if that helps. – jsN00b Commented Mar 3, 2022 at 15:37
• You are already making use of a library react-virtualized-select. What does the documentation for that library say about creating a searchable list? – smac89 Commented Mar 10, 2022 at 15:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6 +50

according to VirtualizedSelect docs here https://www.npmjs./package/react-virtualized-select, the ponent accept array of objects like :

    const options = [
      { label: "One", value: 1 },
      { label: "Two", value: 2 },
      { label: "Three", value: 3, disabled: true }
      // And so on...
    ]

not array of strings and I think this is way its not working, I'd suggest to change your code to :

 <VirtualizedSelect
        id="sponsor" 
        name="sponsor"
        className="form-control"
        placeholder="Sponsor"
        options={ active && result.map((sponsor:Sponsor,index:number)=>
            ({label: sponsor.name, value: sponsor.name})
          
        )}

     >
       </VirtualizedSelect> 

本文标签： javascriptsearchable dropdown in reactStack Overflow