CODEWITHSUNDEEP
reactjsreact-select
wmw147
wmw147

Reputation: 51

React-select set option values from data retrieved from an API

I just started working with React.js and I need some help. I am using react-select and I am stuck with pushing my real data in the option section.

My data after fetching an api that I've created:

const [users,setUsers] = useState([]);

React.useEffect(() =>{
    fetch('https://localhost:7094/graphql/',{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify({query: defTypedsQuery})
    }).
    then(response => response.json())
    .then(data =>setUsers(data.data.defTypeds))
    .then(console.log("users=",users));
}, []);

When I console.log the data, I can see everything I need but somehow the option attribute returns null.

React-select:

<Select   
options={users.map(obj => 
<option key={obj.kindd} 
value={obj.kindd}> 
{obj.name}</option>)}
placeholder="Изберете..."
isSearchable={true}
isMulti
/>

It doesn't return any error, but there is no option/data in the select. Can you please help me to figure out what I am missing ? Thank you in advance.

Upvotes: 0

Views: 783

Answers (1)

Hasan Aga
Hasan Aga

Reputation: 784

The Select component takes options as follows:

        <Select
          isClearable}
          isRtl={isRtl}
          isSearchable={isSearchable}
          name="color"
          options={[
            { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true }]}
        />

As far as I can tell, there is no need for <option/> which you use in your code.

Upvotes: 2

Related Questions