CODEWITHSUNDEEP
react-nativepicker
Aymen Aymen
Aymen Aymen

Reputation: 281

Using React native Picker to display fetched array

I m using fetch to get a data of arrays, and i push them into one array so i could display them as my react native picker items, this my code:

state = {
    selectedValue: '',
    data : []
   
  };
 componentDidMount() {
    
    return fetch('****url')
        .then((response) => response.json())
        .then((res) => {
            let da = [];
            var count = Object.keys(res.proches).length;
            for(var i=0;i<count;i++){
              da.push(res.proches[i][0].nom ); 
            }
            
            
            this.setState({
              data:da
            })
            
            
        })
        .done();
  }
 render() {
    console.log("!!!!!!!!!")
    console.log(this.state.data);
    return (
        <Picker
           selectedValue={this.state.selectedValue}
           onValueChange={() =>{}} >
           { this.state.data.map((item, index)=>
             <Picker.Item label={item} value={index} key={index}/>
           )}
         </Picker>

and this is what console.log(this.state.data) shows: enter image description here

but my picker doesn't display anything neither open up, what have i done wrong? thanks for your replies

Upvotes: 0

Views: 547

Answers (2)

oliver
oliver

Reputation: 13

Try this lightweight and completely customizable package rn-multipicker

Full article: https://dev.to/rahull04/add-multi-select-dropdown-to-react-native-applications-53ef

import { RNMultiSelect } from 'rn-multipicker';

const COUNTRIES = [
"Afghanistan",
"Albania",
"Algeria",
"American Samoa",
"Andorra",
"Angola",
"Anguilla",
"Antarctica",
"Antigua and Barbuda",
"Argentina",
];

const App() {
  const [selectedItems, setSelectedItems] = useState<string[]>([]);

  return (
    <View style={{flex: 1}}>
       <RNMultiSelect placeholder="Countries" data={COUNTRIES} onSelectedItemsChange={(value) => setSelectedItems(value)} selectedItems={selectedItems} />
    </View>
  );
}

Linkedin Post

Upvotes: 0

D10S
D10S

Reputation: 1559

I think it is a styling issue. try to give him style:

<Picker 
    selectedValue={this.state.selectedValue}
    style={{ height: 50, width: 100 }}
    onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
    { 
        this.state.data.map((item, index) => <Picker.Item label={item} value={index} key={index} />)
    }
</Picker>

Upvotes: 1

Related Questions