react-select how to display the option when click on using typescript

Question

I'm still new to reactjs and typescript . I have a filter search bar that filters based on what the user inputs. This also display a drop-down list if clicked on.

The problem I have is when I click on the option: the bar doesn't display the option I click on. Even when I type some input then click on the options, a blank bar is shown.

What is the simplest way to display the option when it's clicked on?

Also, how can I move my data to a different file like JSON file and import it in here and use it in <Select/> in place of data.

import * as React from 'react'
import Select from 'react-select/'


const data = [
    {label: 'React', value: 'react'},
    {label: 'ReactNative', value: 'react-native'},
    {label: 'Java', value: 'java'},
    {label: 'CSS', value: 'css'},
]

function filter(props) {
    return <div>
        <Select options={data} placeholder="Enter some text to filter the list below" />
    </div>
}

export default filter;

Answer 1

What is the simplest way to display the option when it's click on?

I looked at your code and that looks like a functional component

They do not save an State and this is okay in this example. The component that is handling this filter component is the one that should have a state with the selected Option, and display it accordingly. I guess that "parent" component is not being shown here but is somewhere in your code.

Also, how can I move my data to a different file like json file and import it in here and use it in in place of data.

Create a.js file, define a const variable that holds the Json Data, and export it, kinda like this:

export const mockData = {... };