Pass down function from container to functional component in React + TypeScript

Question

I have am trying to create a simple tabs app using React and Typescript. I have a Container component called Tabs that handles state and passes it down to my Content component. I also created a . function called 'handleName' and I am passing it down to my functional component called Sidebar. When the function gets triggered it is supposed to update my state thus re-render my Content component. However, it is not working. And I do not get any errors in my console either. It is just not doing anything.

Here is my Tabs (Container)

import * as React from 'react';
import Sidebar from './Sidebar';
import Content from './Content';
import './css/Tabs.css';

export interface State {
    message: string;
}

class Tabs extends React.Component<{}, State> {
    public state: State = {
        message: 'Select a name from the tabs menu',
    };

    componentWillMount () {
        if ('pluginLoaded' in window) {
            (window as any).pluginLoaded('hello', function (port: any, context: any) {
                // Future work should interact with the message channel here
            });
        }
    }

    handleName(value: string) {
        if (value === 'Vanessa') {
            this.setState({
                message: 'Vanessa means "butterfly"'
            });
        } else if (value === 'Paola') {
            this.setState({
                message: 'Paola means "small"'
            });
        }
    }

    render() {
        return (
            <div className="Tabs">
              <p>Tabs</p>
              <Sidebar handleName={() => this.handleName}/>
              <Content message={this.state.message}/>
            </div>
        );
    }
}

export default Tabs;

Here is my Sidebar

import * as React from 'react';

export interface Props {
    handleName: (value: String) => void;
}

const Sidebar: React.StatelessComponent<Props> = (props) => {

    // declare constants
    const Vanessa = 'Vanessa',
        Paola = 'Paola';

    return(
        <div className="Sidebar">
            <h1>Tabs</h1>
            <ul>
                <li><a onClick={() => props.handleName(Vanessa)}>Vanessa</a></li>
                <li><a onClick={() => props.handleName(Paola)}>Paola</a></li>
            </ul>
        </div>
    );
};

export default Sidebar;

And here is my Content

import * as React from 'react';

export interface Props {
    message: string;
}

const Content: React.StatelessComponent<Props> = (props) => {

    return(
        <div className="Content">
            <h1>Find the meaning</h1>
            <p>{props.message}</p>
        </div>
    );
};

export default Content;

Answer 1

Change

<Sidebar handleName={() => this.handleName}/>

to

<Sidebar handleName={this.handleName}/>

Also use arrow function to bind handleName to class scope

handleName = (value: string) => {