React pass array of objects to component which are using different keys

react map array of objects
react loop through array of objects
react render array of components
react: use array.map() to dynamically render elements
react map object
react pass component as prop
react native map array of objects
react map object key value

I'm trying to render a dynamic <select> element generated by React: the input-select component (see below), takes an array of objects and every object must contain the value for the <option> and its caption.

export default function InputSelect (props) {
  return (
    <label className="form__element">
      {props.caption}
      <select className="input-select">
        {props.items.map((item, i) => <option key={i} value={item.value}>{item.caption}</option>)}
      </select>
    </label>
  )
}

This becomes a problem when I try to pass an array of objects like this one:

[
  {code: "IT", name: "Italy"},
  {code: "US", name: "United States"},
]

where I have different keys which i cannot change since this data is retrieved from db.

How can i fix this?

Use Array.prototype.map()

<InputSelect
  items={
   [
    {code: "IT", name: "Italy"},
    {code: "US", name: "United States"},
   ].map(country => ({value: country.code, caption: country.name}))
  }
/>

Lists and Keys – React, Below, we loop through the numbers array using the JavaScript map() function. value in your component, pass it explicitly as a prop with a different name:. If you choose not to assign an explicit key to list items then React will default to using indexes as keys. Here is an in-depth explanation about why keys are necessary if you’re interested in learning more. Extracting Components with Keys . Keys only make sense in the context of the surrounding array.

Assuming you own the InputSelect component, you could have it take the caption and value keys from props, like this:

const { Fragment } = React

const countries = [
  {code: "IT", name: "Italy"},
  {code: "US", name: "United States"},
]

const languages = [
  {value: 'IT', caption: 'Italiano'},
  {value: 'DE', caption: 'Tedesco'}
]

const App = props => (
  <Fragment>
    <InputSelect caption="Country" items={countries} captionKey="name" valueKey="code" />
    <br />
    <InputSelect caption="Language" items={languages} />
  </Fragment>
)

function InputSelect ({ valueKey = 'value', captionKey = 'caption', ...props }) {
  return (
    <label className="form__element">
      {props.caption}
      <select className="input-select">
        {props.items.map((item) => <option key={item[valueKey]} value={item[valueKey]}>{item[captionKey]}</option>)}
      </select>
    </label>
  )
}

ReactDOM.render(<App />, document.body)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Can I send an array of objects to child component in React, I am sending data to a child component that is an array of objects: But when I Objects are not valid as a React child (found: object with keys Can console.log return something different from what child component “sees”… So far in this guide we have looked at different examples of how to pass the standard props, objects as props, but apart from these options, we can also pass HTML elements as props in React. The element we want to pass will be rendered into the child and can be moved from the parent as a complete element between the tags of the child component.

You can pass a mapper object to your Select:

function App () {
    const apiData = [
      {code: "IT", name: "Italy"},
      {code: "US", name: "United States"},
    ]

     const mapper = {value: 'code', caption: 'name'}; 
         return(
           <InputSelect items={apiData} mapper={mapper} />
          )
   }



   const defaultMapper = {value: "value", caption: "label"}

   function InputSelect ({ items, caption, mapper = defaultMapper }) {
      const {value, caption} = mapper
      return (
        <label className="form__element">
          {caption}
          <select className="input-select">
            {items.map((item, i) => <option key={i} value={item[value]}>{item[caption]}</option>)}
          </select>
        </label>
      )
    }

How to Pass Properties Object to Child Component, Props in React are pieces of information, or in other words, we can say that Props are generally a static value, objects, or maybe an array. It is used pass the group of keys and value pairs and consume it by using the� React keys are useful when working with dynamically created components or when your lists are altered by the users. Setting the key value will keep your components uniquely identified after the change. Using Keys. Let's dynamically create Content elements with unique index (i). The map function will create three elements from our data array.

How to Display Key and Value Pairs from JSON in ReactJS , The best part is that it allows you to break a component into smaller, A JSON value can be an object, array, number, string, true, false, or null, let's assume a JSON name can have two types of values, a leaf value or We do not necessarily use JSX with React, but it is very helpful when working with UI. React 16 came with those goodies and much more, but In this post, we’ll be looking at the rendering power it also introduced — namely, the ability to render children using Fragments and Array Components. These are new and really exciting concepts that came out of the React 16 release, so let’s look at them closer and get to know them

How To Customize React Components with Props, In this tutorial, you'll create custom components by passing props to your Props are a key part of creating components that are adaptable to different can pass many different data types, from strings, to arrays, to objects,� There channels endpoint returns a data object. Since it's an object I can't map over it like normally I would if it was an array. Thus why I am using Objects.keys(myObj) to turn the object into an array, however it's only an array of it's keys, and in order to get an array of the keys and values I have to do something like this

jest + React 15, I'm running into an error when I try to pass an array of objects to a tested, mounted Here is the component: import * as React from 'react'; import { ReferenceWindo. id='add-person' className='btn' value='Add Another' onClick={this. <option key={`peopleSelect-${j}`} value={p.type} children={p. label}� It will look like a ListView but instead of using the ListView we are using the Text component with ScrollView. We would use the Array.MAP function to extract data from Array objects. So let’s get started 🙂 . Contents in this project Get Object Value From Array and Show on Screen one by one in React Native Android iOS App Example: 1.

Comments
  • Does <option key={item.code} value={item.code}>{item.value}</option> not work? Note: i've just used the property names from the objects in your sample array for purposes of illustration.
  • Yes it works, but i want to use this component with different datasets too
  • Then you'd need to map over your result array to create a new one with the correct property names before calling this component.
  • Also, you should use the value as the key on the options instead of the index like you mentioned in the comments.
  • That's often true, and if you check my comment on the question, I did that there. It's probably not important here, unless the author will be sorting, adding or removing items from these lists dynamically. I'll edit the snippets to show this, anyway.