I've started splitting some code into presentational/container components and I'd like to call a function in the child/presentational component and pass both the event and some sort of prop back to the parent.

Parent:

class Parent extends Component{

    constructor(props) {

        super(props);

        this.state = {}

        this.reroll = this.reroll.bind(this);

    }



    test(key, e){

        console.log(key, e)

    }

    render() {

        return <Child test={()=>this.test} />

    }

}

Child:

var Child = () => {

    return ( 

        <select onChange={props.test('test-key')}>

            <option value='1'> Option 1 </option>

            //etc...

        </select>

    )

}

Normally, when I had my code all in one place I would write the onChange function like this.

<select onChange={props.test.bind(this, 'test-key')}>

But binding this in the child causes it to no longer function. No other props passed to this function get returned to the parent. Is there any way that I can write this such that I can get back 'test-key'?