How to get an input value using “refs” in react-bootstrap form?

I’m trying to create a form that appears in modal. So when user input a value, that value is stored in local storage. Here’s a picture that help’s you to understand what I mean:

Here is the code of the form:

function FieldGroup({id, label, help, ...props}) {
    return (
        <ReactBootstrap.FormGroup controlId={id}>
            <ReactBootstrap.FormControl {...props} />
            {help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}

const formInstance = (
            placeholder="Recipe Name"
            inputRef={ref => { this.input = ref; }}
        <ReactBootstrap.FormGroup controlId="formControlsTextarea">
            <ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />

As I’ve read in bootstrap React tutorial, I should add
<FormControl inputRef={ref => { this.input = ref; }} /> to the FormControl props. But after adding it I get an error when modal form is invoked:

Can’t use ref there.

You may not use the ref attribute on functional components because they don’t have instances. You can, however, use the ref attribute inside the render function of a functional component:

thanks anyway, though I’ve already found this answer :slight_smile:

Could you post your solution here in case someone else needs it?

How to get an input value using “refs” in react-bootstrap form? i didn’t get answer

Maybe answers in next link would help you

thanks dear i got the answers with above link
label="First Name"
placeholder="Enter recipe title"
inputRef={(ref) => {this.firstName = ref}}