I'm trying to pass this array of objects
options = [
{label:'React', value: 'react'},
{label:'ReactNative', value: 'react-native'},
{label:'JavaScript', value: 'js'},
{label:'CSS', value: 'css'}
];
to a select component
<CustomSelect options={options} />
Nothing is taking the curly braces away. I've tried:
let options: { label: string, value: string}[] = [
{label:'React', value: 'react'},
{label:'ReactNative', value: 'react-native'},
{label:'JavaScript', value: 'js'},
{label:'CSS', value: 'css'}
];
this is a type array with strings in it.
I've also tried:
interface Option {
label: string,
value: string
}
let options: Option[] ;
options = [
{label:'React', value: 'react'},
{label:'ReactNative', value: 'react-native'},
{label:'JavaScript', value: 'js'},
{label:'CSS', value: 'css'}
];
to create an object with strings in it. My understanding is that I create an interface or a type to create an object? Once I create an object, I need to define the array of strings and I don't know how to do that correctly in a typescript way.
If I understand correctly from the question, you might need something like the following:
<select>
<option value="">Select</option>
{options.map((options) => (
<option key={options.label} value={options.value}>
{options.label}
</option>
))}
</select>
If you want to make a custom dropdown component in typescript, this codesandbox might help
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.