javascript - How do I select value and options (label names) are invisible from react-select dropdown?

Question

I am new to React. I'm using react-select and I've used the following code. The dropdown is displayed but I'm unable to see names and unable to view after selecting.

<Select
  variant="outlined"
  margin="normal"
  fullWidth
  value={this.state.selected}
  options={RewardAutomationsList}
  name="selected"
  onChange={this.handleChange}
  placeholder='None'
>
  {RewardAutomationsList.map((option) => (
    <option key={option.id} value ={option.name} label={option.name}>
      {option.name}
    </option>
  ))}
</Select>

handleChange = event => {
  this.setState({
    selected: event.name
  });
};

The RewardAutomationsList looks like this:

RewardAutomationsList:
  0:{name: "TEST 1 (INR 100)", id: "123"}
  1:{name: "test 2 (INR 250)", id: "456"}

Can someone help with this?

Answer 1

same npm package use like this block code.

 import React, { Component } from 'react'
    import Select from 'react-select'
    
    const options = [
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' }
    ]
    
    const MyComponent = () => (
      <Select options={options} />
    )