Swacblooms🦋

Making the Moves
Menu
  • Home
  • Motivation
  • Education
  • Programming
  • About
  • Contact
  • Privacy Policy
Home
Programming
React Refs the easy way
Programming

React Refs the easy way

Sammy September 2, 2019

Hey guys I’m back and banging and in today’s post we gonna be talking about React Refs..

Refs can be seen as a way of making reference to a DOM node or component. In react the gateway of interaction between a parent and child component is usually with the use of props. But sometimes we may need to interact with a component or an element that is outside the normal data flow and that is when Refs come in view.

There are some important uses of ref but in this article but we would demonstrate using ref’s to activate the focus of an input element.

Okay to clarify this I would illustrate this using vanilla JavaScript.

See the Pen Focus in Vanilla JavaScript by Samson Amaugo (@Sammy360) on CodePen.

In the example above you can see that when the Button is clicked the input field gains focus.

Now let us try this out with React Ref

See the Pen Using Refs by Samson Amaugo (@Sammy360) on CodePen.

From the example above you can see how we accomplished the same function in both React and Vanilla JavaScript.

One thing to note from the React implementation is that to use the ref we had to assign a variable to the React.createRef() API. This method would form the connection in the node where the ref prop is assigned.

Also note that ref are not usually used in functional component because they don’t have instances.

You also don’t need to make use of the React.createRef() API always as we can make use of the callback implementation. In the next lesson we would discuss how to use the callback method.

If you have any question …please don’t fail to put it down in the comment section below

Prev Article
Next Article

Related Articles

mysocials
So I created a DotNet CLI tool called MySocials 😜 …

MySocials DotNet CLI Tool

C#: Logging array values to the Console
In this my video I described some tips on how …

C#: Logging Array Values to the Console

About The Author

Sammy

I am Samson Amaugo. I am a full-stack web developer and I specialize in MERN stack development

Leave a Reply

Cancel reply

Search Site

Recent Posts

  • GitHub OAuth Device Flow in DotNet
  • Resumable Download in DotNet
  • Mocking the HttpClient in C#
  • MySocials DotNet CLI Tool
  • Benchmarking in C#

Categories

  • EDUCATION
  • Motivation
  • Programming
  • Uncategorized

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

we respect your privacy and take protecting it seriously

RSS Swacblooms

  • GitHub OAuth Device Flow in DotNet
  • Resumable Download in DotNet
  • Mocking the HttpClient in C#
  • MySocials DotNet CLI Tool
  • Benchmarking in C#
  • C# bang bang operator
  • Using Youtube-like hashes in DotNet 6
  • Creating Attributes and Using Attributes in C#
  • Nodejs installation via PowerShell
  • IntelliSense In C# using VsCode (OmniSharp)

Swacblooms🦋

Making the Moves
Copyright © 2022 Swacblooms🦋
Swacblooms - Making the Moves