onChange doesn't work with FromControl React Bootstrap

Question

I am having issues getting the onChange event from FormControl in React Bootstrap.

const textChangeHandler = (e) => {
   console.log(e);
};

<InputGroup size="sm" className="mt-2">
    <InputGroup.Prepend>
        <InputGroup.Text onChange={textChangeHandler}>
            #
        </InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl />
</InputGroup>

When I type in the text field it doesn't log the changes in the console. What am I doing wrong here?

Answer 1

Put onChange props to your FormControl component

<InputGroup size="sm" className="mt-2">
    <InputGroup.Prepend>
        <InputGroup.Text >
            #
        </InputGroup.Text>
    </InputGroup.Prepend>
    <FormControl onChange={textChangeHandler}/>
</InputGroup>