Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

197
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda