How to render an array of object?

[aztack]

When I try to render a object with a array property, it complains: input at path list is not recognized

import "./styles.css";
import { useControls } from "leva";

function MyComponent(props) {
  useControls({ id: 123, list: props.list }); // <---- list is not recognized
  return <></>;
}

export default function App() {
  const group1 = [
    { name: "a", age: 12 },
    { name: "b", age: 24 }
  ];
  return (
    <div className="App">
      <MyComponent list={group1} />
    </div>
  );
}

codesandbox

So what is the proper way to render a list of objects?

[dbismut]

This is a question. Not an issue. How do you expect Leva to render an array of objects?

[aztack]

Maybe something like this:

What I want is that array of objects rendered in a folder and items in that array can be deleted/added dynamically.
Is this possible?

[dbismut]

Not at the moment but that could be doable through a plugin maybe.

[aztack]

Since useControls inside a forEach or for loop will result in
ERROR Warning: React has detected a change in the order of Hooks called by ...
when array size changed.
Is there a JSX way to use leva controls to avoid this error?

Never mind, I found JSX example in demo/leva-custom-plugin folder.