How to Implement it with functional component

[siddiquesheikh30]

No description provided.

[siddiquesheikh30]

hey people how can I change this class component into functional component

[mbergnl]

simple example with functional components

import React, {useState, Fragment} from 'react';
import SearchableDropdown from 'react-native-searchable-dropdown';

const items = [
    {id: 1, name: 'JavaScript',},
    {id: 2, name: 'Java',},
    {id: 3, name: 'Ruby',},
    {id: 4, name: 'React Native',},
    {id: 5, name: 'PHP',},
    {id: 6, name: 'Python',},
    {id: 7, name: 'Go',},
    {id: 8, name: 'Swift',},
];

const App: () => Node = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const addItem = (item) => {
      setSelectedItems(item)
  }

  return (
      <Fragment>
        <SearchableDropdown
            containerStyle={{ padding: 5, width: '40%' }}
            selectedItems={selectedItems}
            onTextChange={text => console.log(text)}
            onItemSelect={addItem}
            items={items}
            defaultIndex={1}
            textInputStyle={{
                padding: 12,
                borderWidth: 1,
                borderColor: '#ccc',
                backgroundColor: '#FAF7F6',
            }}
            itemStyle={{
                padding: 10,
                marginTop: 2,
                backgroundColor: '#FAF9F8',
                borderColor: '#bbb',
                borderWidth: 1,
            }}
            itemTextStyle={{
                color: '#222',
            }}
            itemsContainerStyle={{
                maxHeight: '80%',
            }}
            resetValue={false}
        >
        </SearchableDropdown>
      </Fragment>
  );
};

export default App;