Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

195
Views
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>
);

}

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!