How do I use a function to pass parameter to the function received as props in react?

Question

import React, {Component} from 'react';
export default class InputBlock extends Component{
handleChange = (e, props) =>{                //Checked passing props didn't worked.
    const inputVal = this.msgInput.value;
    props.onMessageSent(inputVal);
    e.preventDefault();
}

render(){
    return (
        <div>
            <form onSubmit={this.handleSubmit} >
                <input type="text" className="msgInput" ref = {input => this.msgInput = input}/>
                <input type="submit" value = "submit" className="sendButton" />
            </form>
        </div>
    )
}

}

Here I am receiving function onMessageSent function as a props from parent component. I want to pass the value of input to the function so that I can set that value to state and pass it as a prop to different component. Here 's my parent Component:-

import React, {Component} from 'react';

import Messages from './Messages';
import InputBlock from './InputBlock';

export default class MainInterface extends Component {
    constructor(props){
        super(props);
        this.state = {
            sent: [],
            received: []
        }
    }   

    onMessageSent = (val) =>{
        this.setState(prevState => ({
          sent: [...prevState.sent, val]
        }))
    }

    render(){
        return (
            <div>
                <Messages sent={this.state.sent} received={this.state.received}/>
                <InputBlock onChange = {this.onMessageSent} />
            </div>
        )
    }
}

**NOTE:**There was a type it should be onMessageSent instead of onMessagesent. Sorry for wasting your time.

Answer 1

Your components are defined as ES6 classes, in this case you can refer component's props as this.props without need to pass them as argument to your class methods. So your method should look like:

handleChange(e) {
    const inputVal = this.msgInput.value;
    this.props.onChange(inputVal);
    e.preventDefault();
}

Answer 2

 import React, {Component} from 'react';
export default class InputBlock extends Component{
handleChange = (e) =>{                //Checked passing props didn't worked.
    const inputVal = this.msgInput.value;
    this.props.onMessageSent(inputVal);
    e.preventDefault();
}

render(){
    return (
        <div>
            <form onSubmit={this.handleSubmit} >
                <input type="text" className="msgInput" ref = {input => this.msgInput = input}/>
                <input type="submit" value = "submit" className="sendButton" />
            </form>
        </div>
    )
}

import React, {Component} from 'react';

import Messages from './Messages';
import InputBlock from './InputBlock';

export default class MainInterface extends Component {
    constructor(props){
        super(props);
        this.state = {
            sent: [],
            received: []
        }
        this.onMessageSent= this.onMessageSent.bind(this)
    }   

    onMessagesent = (val) =>{
        this.setState(prevState => ({
          sent: [...prevState.sent, val]
        }))
    }

    render(){
        return (
            <div>
                <Messages sent={this.state.sent} received={this.state.received}/>
                <InputBlock onChange = {this.onMessageSent)} />
            </div>
        )
    }
}