how to use the onSelect callback from the @naisutech/react-tree

Question

I am using @naisutech/react-tree plugin and I can get the sample to work in my code. The tree is displayed and operates correctly. I tried the theme property and that works ok. I just cannot get the onSelect callback to work. I am simply doing a console.log(props) for now.
I have tried a different tree as a test and that tree (import TreeMenu from 'react-simple-tree-menu') the 'click' callback works ok.

I have tried using a method in the RecipePage class, I have tried an 'in-line' function. Everything seems to 'compile' but I never see a console message from the @naisutech tree, I do see console log messages from the react-simple-tree-menu.

I looked at the @naisutech code it and to me (I know nothing about React, just started) that the property is selectNode or maybe selectedNode not onSelect as documentation states, but nothing I tried worked.

My code is simply:

import React, { Component } from "react";
import TreeMenu from 'react-simple-tree-menu'
import Tree from '@naisutech/react-tree'
import './RecipePage.css';

function onSelect (props)  {
    console.log(props);
}

class RecipePage extends Component {

onclickTree(props) {
    console.log(props);
}

onclickTree2(props) {
    console.log(props);
}

render() {

    const nodes = [
       {
           label: 'Node',
           id: 1234,
           parentId: null,
           items: [
             {
                 label: 'File',
                 parentId: 1234,
                 id: 5678
             }
           ]
       },
       {
           label: 'Child node 1',
           id: 1236,
           parentId: 1234,
           items: null
       },
       {
           label: 'Child node 2',
           id: 5678,
           parentId: 1234,
           items: [
             {
                 label: 'File 1',
                 parentId: 5678,
                 id: 7890
             }
           ]
       },
       {
           label: 'Node',
           id: 1235,
           parentId: null,
           items: null
       }
    ]

    const myTheme = {
        'my-theme': {
            text: '#fff', 
            bg: '#000',
            highlight: 'blue', // the colours used for selected and hover items
            decal: 'green', // the colours used for open folder indicators and icons
            accent: '#999' // the colour used for row borders and empty file indicators
        }
    }

    return(
        <div id="recipePage" className="RecipeMenu" >
            <div className="closeButton" zstyle="border-style:solid; border-color:green; border-width:thin;" >
               <img src={require('./../CommonImages/closeButton_W_90x90.png')} height="90px" onClick={() => this.props.close()} alt="Menu buttons"></img>
                <TreeMenu data={treeData2} onClickItem = {onSelect()} />
                   <Tree nodes={nodes} selectNode={onSelect()} theme = {'my-theme'} customTheme={myTheme} />
            </div>
        </div>
    );
}

Answer 1

You're calling the function while passing it, you just need to pass its reference.

Change it to onSelect={onSelect}, Your passed function will be called when the event is triggered.

Edit - I just verified, onSelect is the right prop.

Sandbox link