React ref using reactstrap Input Module doesn't have Value prop

Question

I have a react component with the following input element:

import React, {
    Component
} from 'react';
import {Input } from 'reactstrap';     
constructor(props) {
    super(props)   
    this.test = React.createRef();       
}

render() {
    console.log(this.test.current)
    return (
         <Input ref={this.test} defaultValue = "This is the default" />
    )
}

I want to grab the value Prop from the ref {this.test} however, when I console log I receive the following output.

Input {props: {…}, context: {…}, refs: {…}, updater: {…}, getRef: ƒ, …}
context: {}
focus: ƒ ()
getRef: ƒ ()
props: {defaultValue: "This is the default", onChange: ƒ, type: "text"}
refs: {}
state: null
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
_reactInternalFiber: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: Input, …}
_reactInternalInstance: {_processChildContext: ƒ}
isMounted: (...)
replaceState: (...)
__proto__: Component

How do i get a value prop using reactstrap "Input" tag instead of the built in HTML "input" Dom element.

Craig Gehring · Accepted Answer · 2019-03-14 22:13:44Z

24

Use innerRef instead of ref with your Input component.

https://reactstrap.github.io/components/form/

answered Mar 14, 2019 at 22:13

Craig Gehring

3,4171 gold badge11 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

muso mwale Over a year ago

Thanks this works. Changed my code to: <Input innerRef={this.test} defaultValue = "This is the default" onChange={this.handleChange}/>

Collectives™ on Stack Overflow

React ref using reactstrap Input Module doesn't have Value prop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related