Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

196
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda