how to populate values of nested array in Auto Complete Material UI

Question

I have an array of Objects which includes an nested array ,

 [
  {
    code:1234,
    componentData:[{
       title:'B123456',
       Dates:'02-07-2021'
      }]
   }
 ]

Now i want to populate these values as option in dropdown of auto complete component using Material UI and Reactjs. I went through the docs and every example has a simple array of objects, which is not what I'm looking for. I'm trying to figure out how to show both title and Dates in the dropdown options of autocomplete. And then try to fire the onchange function and get both title and Dates values on Select by the user.

https://codesandbox.io/s/material-demo-forked-8k9hu?file=/demo.js Code Sandbox Link : Code

Something like this :

Steven D. · Accepted Answer · 2021-07-02 19:42:23Z

If I understand correctly, you'd like to show the nested componentData options, given an array of objects which all contain componentData. If that's right, you can use a flatMap to convert your nested array data to a single array of options, like:

  const data =  [
    {
      code: 1234,
      componentData: [
        {
          title:'B123456',
          Dates:'02-07-2021'
        },
        {
          title:'B789',
          Dates:'02-08-2021'
        },
      ]
    },
    {
      code: 2345,
      componentData: [
        {
          title:'B234567',
          Dates:'02-07-2021'
        },
      ]
    }
  ];
  
  // `options` will be an Array of length 3 (for the 3 nested options above)
  const options = data.flatMap(object => object.componentData);

  // Render autocomplete given the `options`, where you define whatever `onChange` handler you need
  // to access the `title` and `Dates`, and provide a `renderOption` prop to choose how to present
  // the data as an option in your UI
  return (
    <Autocomplete
      options={options}
      onChange={(event, newValue) => {
        if (newValue) {
          console.log(newValue.title);
          console.log(newValue.Dates);
        }
      }}
      renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined" />}
      renderOption={(option) => <Typography>{option.title} - {option.Dates}</Typography>}
    />
  );

Collectives™ on Stack Overflow

how to populate values of nested array in Auto Complete Material UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related