return array of objects from props React JS

Question

so I have the following component that is a dropdown list created using react-select.

import React from 'react'
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];


class MealsFilters extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: null,
    };
  }

  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }

  render() {
    const { selectedOption } = this.state;
    return (
      <div className="container my-3">
        <div className="row">
          <div className="col-lg-4 col-md-6 col-sm-8">
            <Select
            isMulti
            isSearchable
            placeholder={"catégories"}
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
            />
          </div>
        </div>
      </div>
    )
  }
}

export default MealsFilters;

the options variable is the default one from the docs. I actually need to replace its values by each meal category available. To do so, as you can see, I need to create an array of objects with a value and a label.

this component accesses meal categories through props called meals that are like so:

console.log(this.props.meals);

=> [{
     id: 0,
     name: spaghettis,
     category: italian,
     price: 5.99},
    {
     id: 1,
     name: hamburger,
     category: american,
     price: 7.99},
     {
      etc.
      }, {}]

How can I take advantage of this.props.meals to get my options array of objects ?

EDIT: multiple meals can have the same category, and I need each category to only appear once in the options.

Anurag Awasthi · Accepted Answer · 2018-11-08 08:03:04Z

2

Map over your this.props.meals array, and create the needed options array,

<Select
    isMulti
    isSearchable
    placeholder={"catégories"}
    value={selectedOption}
    onChange={this.handleChange}
    options={this.props.meal.map(item=>({value: item.id, label: item.name}))}
/>

answered Nov 8, 2018 at 8:03

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

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

1 Comment

Uj Corb Over a year ago

thank you very much for your help ! please see my post edit, I'd like to find a way to have each category (I'm not looking for name btw) to appear only once in the options.

HMR · Accepted Answer · 2018-11-08 08:38:24Z

1

You could do something like this:

options={this.props.meals.map(
  ({id, name})=>({value:id,label:name})
)}

You could also use redux connect to create a container that will map the data to dropdown values for you

You can merge the data by category in the following way:

var items = [
  {
    id: 0,
    name: 'spaghettis',
    category: 'italian',
    price: 5.99,
  },
  {
    id: 1,
    name: 'hamburger',
    category: 'american',
    price: 7.99,
  },
  {
    id: 2,
    name: 'other hamburger',
    category: 'american',
    price: 7.99,
  },
];

console.log(
  [
    ...items.reduce(
      (result, item) => (
        result.get(item.category)
          ? result.get(item.category).push(item.id)
          : result.set(item.category, [item.id]),
        result
      ),
      new Map(),
    ),
  ].map(([label, value]) => ({ label, value })),
);

In the component it'll look like this:

options={[
  ...this.props.meals.reduce(
    (result, item) => (
      result.get(item.category)
        ? result.get(item.category).push(item.id)
        : result.set(item.category, [item.id]),
      result
    ),
    new Map(),
  ),
].map(([label, value]) => ({ label, value }))}

edited Nov 8, 2018 at 8:38

answered Nov 8, 2018 at 8:02

HMR

39.5k26 gold badges99 silver badges175 bronze badges

4 Comments

Uj Corb Over a year ago

Thank you @HMR ! actually I forgot to mention that some meals have the same category. And I want to have each category only once in the options. I'll edit my post right now to make it clearer.

HMR Over a year ago

@JulesCorb Would you throw out the items that have the same category as a previous one or would you merge these items. If you want to merge then how would you merge the items? Probably best to provide a sample source and expected output.

Uj Corb Over a year ago

Both solutions would suit to my problem. All I need is to have each category only once in my options. So it doesn't mater whether I have to throw out or merge items. I'll go for the simplest, most DRY solution.

HMR Over a year ago

@JulesCorb Updated the answer.

kemicofa · Accepted Answer · 2018-11-08 08:12:45Z

1

You only need the "name" property so when you map through meals, simply retrieve it. Then upper case the first letter.

const meals = [{
    id: 0,
    name: "spaghettis",
    category: "italian",
    price: 5.99
  },
  {
    id: 1,
    name: "hamburger",
    category: "american",
    price: 7.99
  }
]

const result = meals.map(({name}) => ({
  label: `${name[0].toUpperCase()}${name.slice(1)}`,
  value: name
}))

console.log(result);

answered Nov 8, 2018 at 8:12

kemicofa

17.7k10 gold badges93 silver badges145 bronze badges

Comments

ed' · Accepted Answer · 2018-11-08 08:13:32Z

1

You can use getOptionLabel and getOptionValue props.

<Select
    options={this.props.meals},
    getOptionLabel={m => m.name}
    getOptionValue={m => m.id} />

https://react-select.com/props

getOptionLabel generic = (option) => string

Resolves option data to a string to be displayed as the label by components

getOptionValue generic = (option) => string

Resolves option data to a string to compare options and specify value attributes

answered Nov 8, 2018 at 8:13

ed'

1,9151 gold badge17 silver badges33 bronze badges

1 Comment

Uj Corb Over a year ago

as said in my post I actually need the category and not the name. isn't it getOptionLabel={(m) => m.name} rather than getOptionLabel={(m) => c.name} ? anyway apart from those details this is a valid answer too, so thank you very much ! The thing is, I need each category only once, and this gives me the same category multiple times in the options.

Collectives™ on Stack Overflow

return array of objects from props React JS

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related