How to pass the input value from child to parent in react typescript

Question

parent component:

import React from "react";
import InputRow from "./InputRow";

const Bid: React.FunctionComponent = () => {
const inpVal = (d:string) => {
}

return (
<div style={{ display: "none" }} className="bid-container animated zoomIn" id="bid-modal">
  <p>Mortage</p>
  <div className="bid-row-container">
    <p>Enter your bid</p>
    <div className="bid-row">
      <InputRow bid="Bid" inpVal={(inpVal: string)=>{console.log(inpVal)}} />
    </div>
  </div>
</div>
);
};

export default Bid;

child component:

import React from "react";

interface Props{
bid: string,
inpVal: (inpVal:string) => void;
}

const InputRow: React.FunctionComponent<Props> = (bid, inpVal) => {


 return (
<div className="input-row">
  <div>
    <input type="text"  onChange={(e) => { inpVal(e.target.value) }} />
    <p>Rate</p>
  </div>

  <button className="bid-btn">{bid.bid}</button>
</div>
);
};

 export default InputRow;

I am trying to pass the input value from the child component to the parent component but it is throwing error.

TypeError: inpVal is not a function.

Answer 1

pass value using props function

How to pass data from child component to its parent in ReactJS?

Parent:

<div className="col-sm-9" >
     <SelectLanguage onSelectLanguage={this.handleLanguage}/> 
</div>

Child:

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

Answer 2

You need to wrap your parameters in {} which will extract bid and inpVal from the props object

const InputRow: React.FunctionComponent<Props> = ({ bid, inpVal }) => {...}