CODEWITHSUNDEEP
javascriptantdreact-sortable-hoc
Darya Balu
Darya Balu

Reputation: 149

React Sortable Trees and Title / Tooltip for every node

I use React Sortable Tree library and encountered the following issue: how can I give HTML title attribute to every node / wrap every node in Tooltip tag provided by Ant Design, for example?

This is my code so far:

function App() {
const data = [
    {title: 'Felidae', children: [{title: 'wildcat'}, {title: 'lynx'}]},
    {title: 'Canide', children: [{title: 'coyote'}, {title: 'fox'}]}
]
const [treeData, setTreeData] = useState(data)

return (
    <div style={{height: 400}}>
        <SortableTree
            isVirtualized={false}
            treeData={treeData}
            onChange={treeData => setTreeData(treeData)}
        />
    </div>
);

}

Upvotes: 1

Views: 966

Answers (1)

Jorge Pirela
Jorge Pirela

Reputation: 154

To solve the issue redirect the onChange property to a function so that you can let SorteableTree Component send the values naturally and you can control it in a function:

import React, { useState } from 'react'
import SortableTree from 'react-sortable-tree'

const ExtraAppsTodoistList = () => {
  const data = [
    {title: 'Felidae', children: [{title: 'wildcat'}, {title: 'lynx'}]},
    {title: 'Canide', children: [{title: 'coyote'}, {title: 'fox'}]}
  ]
  const [treeData, setTreeData] = useState(data)

  const onChangeNode = (value) => {
    console.log(value)
    setTreeData(value)
  }

  return (
    <div style={{height: 400}}>
      <SortableTree
        isVirtualized={false}
        treeData={treeData}
        onChange={onChangeNode}
      />
    </div>
  );
}

export default ExtraAppsTodoistList
enter code here

You can verify in the console that indeed the SortableTree Component naturally returns the resulting node in the value variable that you can later control in a State Hook:

enter image description here

That way you can extract the title property of each node contained in the value variable by applying forEach:

value.forEach((item) => {
    console.log(item.title)
});

I hope that with this knowledge you can solve the issue. On the other hand, it is best NOT to control each node but at the end of the user finishing ordering and modifying the content of the SorteableTree Component, click on a button to store the changes and there if you can apply forEach to the entire tree to analyze what Each root node has leaf nodes and thus there are no empty roots, after that check you can store the nodes in your data structures designed for this purpose.

Upvotes: 1

Related Questions