Material UI Autocomplete, multiple default values

Question

I have a working material ui auto component that has the following code:

     <Autocomplete
              multiple
              options={props.cats}
              defaultValue={editRequest?([props.cats[props.post.category]]):undefined}
              limitTags={2}

This works when props.post.category has just one value in props.post.category.

When there are two values such as 34,36 coming in for props.post.category, it breaks the page with errors. In a normal function, I would use .map to loop through the array. This is inside a defaultValue so I cant figure out how to assign two default values which are basically

props.cats[34] and props.cats[36]

In other words, how can a string separated by commas be converted to individual arrays

input=> 34,35 (stored in props.category)
array=> [props.cats[34], props.cats[35]]

hgb123 · Accepted Answer · 2020-08-14 03:13:02Z

1

You could wrap any props.post.category with square bracket, flat it then map, so you don't have to worry about whenever it is a single value or array of values

console.log([34].flat())
console.log([[35, 36]].flat())

const getDefaultValue = () => {
  if (!editRequest) {
    return undefined
  }

  return [props.post.category].flat().map((cat) => props.cats[cat])
}

return (
  <Autocomplete
    multiple
    options={props.cats}
    defaultValue={getDefaultValue()}
    limitTags={2}
  />
)

answered Aug 14, 2020 at 3:13

hgb123

14.9k3 gold badges24 silver badges43 bronze badges

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

1 Comment

Kal Over a year ago

Thanks. It expects [props.cats[35],props.cats[36]]. I am getting some intermediate value cannot be filtered error. Let me play with this based on your answer.

Collectives™ on Stack Overflow

Material UI Autocomplete, multiple default values

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related