return array of objects from props React JS

react native map array of objects
react native array of objects
react loop through array of objects
react map object
react key=(index)
react props array
react loop through object
react list component

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.

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 })),
);

How do i render an array of object in react - Programming Help, Here is what I have done so far: class App extends React. Component { constructor(props){ super(props); this.… Hi, I am new to react, and I would like to know how I can render an array of object(questions & answers). setState({ question: questions }) } render(){ return( <div className = "container">  Shubham's answer explains very well. This answer is addition to it as per to avoid some pitfalls and refactoring to a more readable syntax . Pitfall: There is common misconception in rendering array of objects especially if there is an update or delete action performed on data.

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}))}
/>

How to manage React State with Arrays, Learn how to manipulate arrays in React state by using JavaScript array methods does work, because it iterates over an empty array and thus returns no item for it. That works with multiple properties in the state object too. Try it on CodePen. This code displays a bullet list of numbers between 1 and 5. Basic List Component . Usually you would render lists inside a component.. We can refactor the previous example into a component that accepts an array of numbers and outputs a list of elements.

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);

Working with Objects in React - Ross Bulat, The concepts discussed here can also be applied to React JS (React for props to server responses, objects to arrays (and converting between the objects due to the fact it returns a nicely formatted array of JSX items that  The React docs strongly encourage the use of the map function, not just for its simplicity, but because it creates a new array from the data, rather than trying to mutate/overwrite existing data

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

Lists and Keys – React, First, let's review how you transform lists in JavaScript. Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it: function NumberList(props) { const numbers = props.numbers; const listItems  React is pretty flexible but it has a single strict rule: All React components must act like pure functions with respect to their props. Of course, application UIs are dynamic and change over time. In the next section, we will introduce a new concept of “state”. State allows React components to change their output over time in response to

Rendering Arrays in React, Using something like a loop against an array or an object means you only have You probably noticed that in order to return the array of components the wrapper components with props using the React JavaScript library. Search Bar in React JS in Six Simple Steps. Renée Cruz. Follow. Nov 22, 2019 · 7 min read. So you want to make a search bar in React JS. Cool! (e.g. array-like objects).

Understanding Render Props in React, Objects, arrays, booleans, strings, Numbers can be passed to child constructor(​props) { } render() { return ( <div> Age: {this.props.age} prop is a function prop that a component uses to know what to render — Reactjs Blog  class Items extends React.Component { render() { return ( <React.Fragment> <Fruit /> <Beverages /> <Drinks /> </React.Fragment> ) } } We have three child components inside of the fragment and can now create a component for the container that wraps it.

Rendering an Array of Data with map() and JSX, Luckily for us, this is easy to do in JSX thanks to an array method called map() . When you call src/pages/Detail.js constructor(props) { super(props); const people = []; for (let i = 0; i < 10; i++) render() { return (<div> {this.state.people.​map((person, index) => ( <p>Hello, {person.name} from {person.country}!</p> ))} </div>); }. Rendering an Array of Data with map() and JSX. There's one more thing we're going to cover before you know enough React basics to be able to move on to a real project, and that's how to loop over an array to render its contents.

Comments
  • 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.
  • @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.
  • 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.
  • @JulesCorb Updated the answer.
  • 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.
  • 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.