opendevs
Hide the div

Forward Ref

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?


Difficulty

medium

Solve the practice problems to earn    DevCoin image 
Coding Area
Output

Copyright © 2022 opendevs

Learn ● Develop ● Ace
All illustrations by Storyset