Navigate back to the homepage

How to create a ref of the functional component in React?

Infinitbility
React
November 18th, 2021 · 1 min read
How to create a ref of the functional component in React?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

This tutorial will help you to create a ref of your custom functional component in react, after creating ref we are able to use the child component function in the parent component and many things.

Let start today’s tutorial How to create a ref of the functional component in React?

I found, many tutorials where they are explaining how to use ref in functional components but rarely do I find how to make referenceable custom functional components where we can use ref in any place. i.e I’m writing this tutorial. hope it will help you.

Now, let’s create the referenceable functional component, and then we will use it in another functional component.

1import { forwardRef, useRef, useImperativeHandle } from "react"
2
3const ChildComp = forwardRef((props, ref) => {
4 useImperativeHandle(ref, () => ({
5 showAlert() {
6 alert("Hello from Child Component")
7 },
8 }))
9 return <div></div>
10})
11
12function App() {
13 const childCompRef = useRef()
14 return (
15 <div>
16 <button onClick={() => childCompRef.current.showAlert()}>Click Me</button>
17 <ChildComp ref={childCompRef} />
18 </div>
19 )
20}
21
22export default App

in this above example, we are used to react forwardRef and useImperativeHandle to make things possible. now we will call child component function from parent component using ref.

forwardRef, useImperativeHandle, Example

You can also use the above example in react native, you have to just use react native view, button tags.

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

How to encrypt SQLite database?

How to encrypt SQLite database?

Example of SQLite encryption using SQLcipher and SQLite DB browser.

November 17th, 2021 · 1 min read
How to use interface in React hook useState?

How to use interface in React hook useState?

Example of use interface or DTO in React useState hook.

November 16th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]