how to build multilevel check box tree with react-hook-from and MUI

[nageshwari17]

Hi Team ,

I have requirement to build multilevel checkbox tree. some thing like as below CSB

https://codesandbox.io/embed/silly-browser-81ff9.

But I am unable build using MUI with react-hook-form. Please help me with this .

Thank you .

[Moshyfawn]

What's the issue you're having while integrating your TreeView with RHF?
On the first look, it should be as easy as use a Controller / useController and passing field.onChange into an onChange callback of your TreeView that's called on every checkbox check / uncheck

[nageshwari17]

Hi @Moshyfawn ,

I have mapped as below CSB of tree view with RHF
https://codesandbox.io/s/treeview-with-styled-checkboxes-forked-pc5yk?file=/src/App.js

Can you please help me how do I form the value of this .

I want value in array format as below :

parent={ child-1: [], child-2: { child-4: [ child-5, child-6 ] } }

[Moshyfawn]

I don't think I can create a full example ATM, but there're 2 main ways you can tackle it:

• You can use Controller as you've already started to implement (or I'd recommend using useController instead) and handle the value change for both RHF and your TreeView state smth like that

const handleChange = (event, checked) => {
  getOnChange(checked, nodes);
  field.onChange(checked);
};

See this CSB
Now, be aware, that this would essentially update both TreeView and RHF states. It shouldn't be that much of an issue, but I'd recommend, if you wanna fully integrate RHF with your TreeView, to get rid of the TreeView state and only rely on the RHF one.

• You can also refactor your TreeView's state shape to the format you want and pass an onChange callback that you're gonna use to update the RHF state. So, you'd wrap your TreeView in a Controller (or use useController hook).

As much as I'd wanna help you refactor your component, I don't have the time to fully do that ATM

[JamesWong1999]

I think it's better to build it without react hook form first, then see if you do need the library (validation). It's more of how do you structure the components and leverage the state update.