Bug: Retool won't let me use Array.prototype.map() in a Column dropdown 'values' definition

App Building
1

Hi Retool,

I am trying to map an array of simple objects of form:

{
    id: string,
    name: string
}

such that their names are displayed in a dropdown.

I have done this before with other elements using map, per instruction here, but these appear to have stopped working today.

I can confirm that the scripts I am using: {{table.selectedRow.data['field name'].map(val => val.name)}} each evaluate to an array of strings respectively, but I receive the Objects are not valid as react child... error.

Additionally, just to confirm my script was correct. I set up a standalone Dropdown object that accessed query.data[{random index}] as opposed to table.selectedRow, and confirmed that the product of the script was the same as in my table. This dropdown populated with values successfully.

Please investigate at your convenience.
Thanks.

2

Hey there @roblevy. Can you reply with a screenshot of your property inspector (the left panel) so I can see what the data structure looks like? I’m having trouble understanding it from your post.

3

Absolutely

data-structure-retool-query
data-structure-retool-query584×948 46.8 KB

Every dropdown should display the names of the Potential Matches for the data entry matching the row indice.

4

Thanks @roblevy. There are two things I suspect are going on here:

  1. The values that you pass in for a dropdown’s values or labels need to be formatted as an array. If you pass in a single value, you’ll get an error. So you might need to try wrapping your results in [].
  2. There’s a bug that we’re working on that causes phantom errors in column mappers. The React error that you included is not one of these, but just keep this in mind in case you get an error message but things appear to be working.

Let me know if this helps!

5

This is now happening to me when I try to manipulate the current cell's data. On the preview I can see that the result is what I expected and that it is an array, but when applying typeof it says it is an object for some reason.

Edit: Tested it with Array.isArray and it returned true.

Result from the preview:
image

6

Hi @Tech_Hallo! What is self in this case? A copy/paste of it would be super helpful so I can debug on my end! It seems like verification.status is calculating as null every time.

As a quick sanity check, have you tried something like:

self.map(each => `${each.subcategoryTitle}${each.verification.status?'✅':'🚫'}`)

7

This is an example on how the data of that cell looks like:
[
{
"price":{
"rate":"175",
"type":"fixedPrice"
},
"verification":{
"reviewScreenshotUrl":null,
"status":true,
"submitted":true,
"videoUrl":null,
"onlineReviewUrl":null,
"requestInPersonReview":true
},
"subcategoryId":"subId",
"categoryTitle":"Cat Title",
"title":"Skill Title",
"timeNeeded":"2",
"images":[ ],
"subcategoryImageUrl":"someUrl.com",
"description":"Some description",
"categoryId":"1tDnTFx0zce6BZYg499z",
"subcategoryTitle":"Sub Title",
"lateCancellationFee":"5",
"bookedCount":47
},
...]

Users can have multiple skills in their profile and we want to be able to have a preview of their status.

I tried doing it as you recommended it but had the same result.

8

Thank you for sharing that! I definitely see that it's returning status:true...If you're on a Cloud org, we can step in and work with the data directly! Would you mind writing into support@retool.com (feel free to let us know this is the community post you're writing in about) so we can walk through this with you? We'll make sure to post the solution on this thread as well for visibility!

9