pass ref from reusble component - reactjs

Question

how to pass the ref from a child component
import React, { Component } from "react";
import Text from "./Text";
import { TextInput, View, I18nManager } from "react-native";
import colors from "../styles/colors";
export default class Input extends Component {
render() {
return (
<View>
<View style={{ padding: 10 }}>
<Text>
{this.props.label}
</Text>
</View>
<TextInput
{...this.props}
placeholder={this.props.label}
/>
</View>
);
}
}
I'm trying to focus on next input with this reusable component but it's not working.
<Input
label={'username'}
returnKeyType={"next"}
onSubmitEditing={() => this.refs.password.focus()}
/>
<Input label={'password'} ref={'password'} />

Answer 1

Here's an example of how to do this:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.passwordRef = React.createRef();
}
handleSubmit = e => {
this.passwordRef.current.focus();
};
render() {
return (
<React.Fragment>
<input placeholder="email" />
<button onClick={this.handleSubmit}>next</button>
<hr />
<input ref={this.passwordRef} placeholder="password" />
</React.Fragment>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CodeSandbox here.
Another way, using child:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.passwordRef = React.createRef();
}
render() {
return (
<React.Fragment>
<input placeholder="email" />
<Child passwordRef={this.passwordRef} />
<hr />
<input ref={this.passwordRef} placeholder="password" />
</React.Fragment>
);
}
}
const Child = ({ passwordRef }) => {
return <button onClick={() => passwordRef.current.focus()}>focus</button>;
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Short answer: this.ref.current instead of this.ref.

Answer 2

You can utilize React.forwardRef:
const Input = React.forwardRef((props, ref) => (
<View>
<View style={{ padding: 10 }}>
<Text>{this.props.label}</Text>
</View>
<TextInput {...this.props} ref={ref} placeholder={this.props.label} />
</View>
));
export default Input;
And once you've defined Input using forwardRef, you can use the ref attribute as you normally . would:
class App extends React.Component {
inputRef = React.createRef();
focusInput = () => {
this.inputRef.current.focus();
}
render() {
return <Input ref={this.inputRef} />;
}
}