Stateless React component with onChange handler: Synthetic event warning

Question

I am trying do do a simple implementation on a stateful component who's state is managed by a stateless Child. Currently the handler only triggers a console.log.

Expected behavior: When an field is updated the parent component should trigger a console.log.

Actual behavior The setInterest is never triggered and instead I'm getting an error about synthetic events:

This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property `nativeEvent` on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist().

The components render visually as expected, and I get no other errors either in the browser of Webpack.

Any help would be greatly appreciated.

Stateful component:

// Setting the parameters of the market
export class Parameters extends React.Component {
    // Constructor setting default state
    constructor ( props ) {
        super ( props )
        // Set the state objects
        this.state = {
            interest: {
                pessimistic: this.props.pessimistic || 1,
                historical: this.props.historical || 4,
                optimistic: this.props.optimistic || 7
            }
        }
        // Bind the functions for use in the render
        this.setInterest = this.setState.bind( this )
    }

    // Set the parameters
    setInterest( e ) {
        console.log('I AM NEVER TRIGGERED')
    }

    // Rendering of message
    render( ) {
        return(
            <div>
                <ParametersView
                    handleChange={ this.setInterest }
                    interest={ this.state.interest } />
                <DesiresView />
            </div>
        )

    }
}

Stateless component

// Import react
import React from 'react'

export const ParametersView = ( { handleChange, interest }  ) => {
    return (
            <div>
                <span id="assumptions">
                    <input
                        onChange={ handleChange }
                        value={interest.pessimistic}
                        id="pessimistic" type="number" name="pessimistic" />
                    <input
                        onChange={ handleChange }
                        value={interest.historical}
                        id="historical" type="number" name="historical" />
                    <input
                        onChange={ handleChange }
                        value={interest.optimistic}
                        id="optimistic" type="number" name="optimistic" />
                </span>
            </div>
        )
}

export const DesiresView = (  ) => {
    return ( <p>No desire view yet</p> )
}

Answer 1

You have a typo.

this.setInterest = this.setState.bind( this ) needs to be

this.setInterest = this.setInterest.bind( this )