Append one value from array of lists - react native

Question

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",
  },
]

Some clarifications are needed. If selectedIngredients is an array of objects you cannot simply append it in the url string. That would indeed stringify the array of objects resuting in [object,Object],[object,Object]. What you might want is to use selectedIngredients.map() or any other for loop to create a correct string and append that string to the API url — stilllife
– stilllife, Commented Sep 11, 2018 at 8:47
@stilllife It's actually [object Object] and yes I have to do a loop and append one value in a list or something — user7319004
– user7319004, Commented Sep 11, 2018 at 10:04

Mohammed Ashfaq · Accepted Answer · 2018-09-11 10:28:27Z

1

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)

answered Sep 11, 2018 at 10:28

Mohammed Ashfaq

3,4262 gold badges19 silver badges24 bronze badges

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

1 Comment

user7319004 Over a year ago

ValuesInString = Values.replace(' ',"+") Thanks!

rooch84 · Accepted Answer · 2018-09-11 10:31:43Z

0

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.

edited Sep 11, 2018 at 10:31

answered Sep 11, 2018 at 9:02

rooch84

6545 silver badges13 bronze badges

3 Comments

user7319004 Over a year ago

I don't think you understand my problem

rooch84 Over a year ago

What does console.log(this.state.selectedIngredients) look like?

user7319004 Over a year ago

I added it to my post, can you help? I expect a string like selectedIngredients="goat,cream,butter"

Collectives™ on Stack Overflow

Append one value from array of lists - react native

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related