How can I pass an array of values in the Ant Design cascader?

Question

I am using Ant Design to create a cascading dropdown. Instead of hard coding the values, how can I populate them from an array? Right now, the dropdown is showing the value array as one long list, instead of separating it into different options. Here is my code so far:

var valueArray = ["a", "b", "c"];
var childrenArray = ["d", "e", "f"];
var val;
var child; 

for(var i=0; i<valueArray.length; i++){
    val = valueArray[i];
    child = chilrenArray[i]
}
const options = [
  {
    value: val,
    label: val,
    children: [
      {
        value: child,
        label: child,
      }
     ]
   }
];

Answer 1

Give this a try:

var valueArray = ["a", "b", "c"];
var childrenArray = ["d", "e", "f"];

const options = valueArray.map(v => {
  const item = {
    value: v,
    label: v,
  };
  if (v === "a") {
    // add the children
    item.children = childrenArray.map(c => ({
      value: c,
      label: c
    }));
  }
  return item;
});

console.log(options);