opendevs logo

Forward Ref

Solidify your knowledge of Refs in React by solving this problem.
Hide the div

We have two components: <TextInput /> and <App />. TextInput renders a text input field.

const TextInput = () => ( <div> <input type="text" /> </div> )

App component consumes TextInput.

const App = () => { return ( <div> <TextInput /> <TextInput /> <button>Button 1</button> <button>Button 2</button> </div> ) }

When Button 1 is clicked, first textbox should get focus and when second button is clicked, second textbox should get focus. How can we do that using ref?

Solve this medium problem to earn  2  DevCoin image
Coding Area
opendevs logo
CoursesFAQsContact UsPrivacy PolicyTerms Of Service
Copyright © 2023 opendevs
Learn ● Develop ● Ace
All illustrations by Storyset