CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
user7319004
user7319004

Reputation:

Append one value from array of lists - react native

This API require me to send some data comma separated, when handling the user input I use checkboxes like so 

   <SelectMultiple
      items={dairy}
      selectedItems={this.state.selectedIngredients}
      onSelectionsChange={this.onSelectionsChange} />

I can definitely see the inputs if I render selectedIngredients on a FlatList (using item.value) but when I try to print the actual url I am working with I got this [object,Object]

I used this.state.selectedIngredients in the view, here is the result:

url.com/api/?=[object Object],[object Object],[object Object]

Inside my search function I use that code to handle user inputs:

  const { selectedIngredients } = this.state;
  let url = "url.com/api/?i=" + selectedIngredients

In the documentation of the library they say the selected items is type array of string or { label, value } I used the method provided there to append the selected items:

  onSelectionsChange = (selectedIngredients) => {
    // selectedFruits is array of { label, value }
    this.setState({ selectedIngredients})
  }

I tried adding .value on both of them it didn't solve my problem. Could anyone one help please?

Console log this.state.selectedIngredients:

Array [
  Object {
    "label": "Goat cheese",
    "value": "Goat cheese",
  },
  Object {
    "label": "Cream cheese",
    "value": "Cream cheese",
  },
  Object {
    "label": "Butter",
    "value": "Butter",
  },
]

Upvotes: 0

Views: 832

Answers (2)

rooch84
rooch84

Reputation: 654

It's a bit clumsy, but it'll give you a comma-separated string with no trailing comma. 

const { selectedIngredients } = this.state;
let sep = "";
let selectedIngAsString = "";
selectedIngredients.forEach(s => {
   selectedIngAsString += sep + s.value;
   sep = ",";
});
let url = "url.com/api/?i=" + selectedIngAsString

See https://codesandbox.io/s/m5ynqw0jqp

Also, see Mohammed Ashfaq's for a much less clumsy answer.

Upvotes: 0

Mohammed Ashfaq
Mohammed Ashfaq

Reputation: 3426

selectedIngredients = [
 {
    "label": "Goat cheese",
    "value": "Goat cheese",
  },
  {
    "label": "Cream cheese",
    "value": "Cream cheese",
  },
  {
   "label": "Butter",
    "value": "Butter",
  },
]

let selectedValues = selectedIngredients.map((ingredient)=> ingredient.value)
let selectedValuesInString = selectedValues.join(',');
console.log(selectedValuesInString)

Upvotes: 1

Related Questions