React - map over array object and pass to options prop in react-select [duplicate]

Question

I'm trying to map over an array of objects and use the name key to pass it to the options prop in react-select. Can I just do this using regular JS? I'm trying to incorporate this example.

My mock data

    mock.onGet("/dataschemas").reply(200, {
  data: [
    {
      id: "2147483599",
      selfUri: "/dataschemas/2147483599",
      name: "Book Catalog"
    },
    {
      id: "2147483600",
      selfUri: "/dataschemas/2147483600",
      name: "Business Articles"
    },
    {
      id: "2147483602",
      selfUri: "/dataschemas/2147483602",
      name: "Phone Data"
    }
  ]
});

In cDM I'm updating state with the response and storing it in schemas

  componentDidMount() {
    axios.get("/dataschemas").then(function(response) {
      console.log(response.data.data);
      this.setState({
        schemas: response.data.data
      });
      console.log(this.state.schemas);
    });
  }

Then in my select component I'm setting the schemas to the options prop and mapping over that in the values prop

<Select
  id="color"
  options={this.state.schemas}
  isMulti={false}
  value={this.state.schemas.filter(
    ({ name }) => name === this.state.name
  )}
  getOptionLabel={({ name }) => name}
  getOptionValue={({ id }) => id}
  onChange={({ value }) => this.setState({ name: value })}
  onBlur={this.handleBlur}
/>

I can't seem to get the right values in props, to display the dataschema names in the dropdown selection in my codesandbox example

More info on react-select docs pertaining to this issue

specifically, you are using function when you should be using an arrow response => — azium
– azium, Commented Jan 24, 2019 at 5:28
This is an issue, I forgot to change it to use response => — DJ2
– DJ2, Commented Jan 24, 2019 at 5:35
The docs I was reading on the mock adapter were using ES5 instead of ES6 and I overlooked the difference — DJ2
– DJ2, Commented Jan 24, 2019 at 5:42
This was improperly marked as a duplicate. The mentioned "duplicate" questions are about a different, unrelated issue that happened to be present in the codesandbox, not the actual issue being asked about. — George
– George, Commented Jan 24, 2019 at 5:43

George · Accepted Answer · 2019-01-24 05:30:48Z

1

The <Select> component's value prop expect a single object/value. However in the following code:

this.state.schemas.filter(
  ({ name }) => name === this.state.name
)

Calling .filter on an array returns another array. So you're passing an array to value, not a single object. You just need to add a [0] to unwrap the array:

this.state.schemas.filter(
  ({ name }) => name === this.state.name
)[0]

Or use .find instead:

this.state.schemas.find(
  ({ name }) => name === this.state.name
)

answered Jan 24, 2019 at 5:30

George

4,27727 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DJ2 Over a year ago

.find is a better option indeed. Thanks

wmp224 · Accepted Answer · 2019-01-24 05:44:53Z

1

here's a working codesandbox

it seems like the problem was that you were using function syntax instead of fat arrow syntax and as a result this was being bound incorrectly so this.setState was undefined

more info about the difference between function and fat arrow syntax here

How does this work? I like to think of it as fat arrow functions don’t have their own or don’t change the context of ‘this’. They leave it alone so that it stays the same as the context in which the function was created.

For debugging future issues like this, I recommend starting off by looking at the javascript console errors -- the initial tip was an error there that this.setState was undefined

edited Jan 24, 2019 at 5:44

answered Jan 24, 2019 at 5:37

wmp224

4473 silver badges11 bronze badges

2 Comments

George Over a year ago

This answer addresses an issue that happened to be present in the codesanbox, not the actual react-select issue that the question was asking about.

wmp224 Over a year ago

@GeorgeP my interpretation of the question was that this was the issue "I can't seem to get the right values in props, to display the dataschema names in the dropdown selection in my codesandbox example" as a result of the incorrect setState call, no values were populating in the dropdown because this.state.schemas was []... based on the console.logs it seems like this was the underlying problem that they were asking about

Manu Sodhi · Accepted Answer · 2019-01-24 05:35:44Z

-2

You are trying to access state from inside the response function scope. change your componentDidMount to this:

async componentDidMount() {
  const response = await axios.get("/dataschemas");
  if (response.data && response.data.data) {
    this.setState({ schemas: response.data.data });
  }
}

answered Jan 24, 2019 at 5:35

Manu Sodhi

1121 silver badge3 bronze badges

Collectives™ on Stack Overflow

React - map over array object and pass to options prop in react-select [duplicate]

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Related