why always label and value?

[ApuEmdad]

today I've to work with react checkbox. I found there must be the property name label, value, and children property in the data that is being fed to . I want to customize those properties. like label as name, and many properties instead of value. How do I do it? is it possible using react checkbox tree.

[jakezatecky]

The checkbox tree indeed requires the properties label and value, as the former will be the display name and the latter will be the value encoded in the checked array. The component requires children only when there are nodes further down in the hierarchy.

Currently, there is no ability to use different property keys for these node. That could be a feature added in the future, but would necessitate relaxing the TypeScript and PropTypes type checkers.

One way to format your existing data to the required format by this component would be to create a recursive mapping function, such as the following:

function mapProperties(nodes, keyMap) {
  return nodes.map((originalNode) => {
    const newNode = {};

    // Map the original keys to the keys required by the checkbox tree
    Object.keys(keyMap).forEach((originalKey) => {
        newNode[keyMap[originalKey]] = originalNode[originalKey];
    });
    

    // Recursively map all child nodes, too
    if (newNode.children !== undefined) {
        newNode.children = mapProperties(newNode.children, keyMap);
    }

    return { ...originalNode, ...newNode };
  });
}

// Example usage with different keys for `label`, `value`, and `children`
const formattedNodes = mapProperties(nodes, {
    name: 'label',
    otherValueKey: 'value',
    nodes: 'children',
});

I ran a set of depth = 3 nodes on the above and it returned a value that the tree will accept.