Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 18, 2022 06:42 pm GMT

Refs in React

What are Refs?? anyone??

Image description
Don't know, I am here to help you. if You know how to manipulate the DOM(Document Object Model) using Vanilla Javascript. Then understanding this concept would be easier.
So the ref's concept is same as using document.getElementById, document.getElementByClassName or document.getElementByTagName in javascript. This method is used to get access of the current element or component in the DOM structure were we can manipulate it or change its CSS attribute, delete or add an element. Same in React.js the Refs hook is used to get the access of the current element, Where it passes the current element object. We can manipulate it by calling the current attribute of that object. It doesn't re-render while the element is manipulated.

Lets understand it with an example:-

function CustomTextInput(props) {  const Input = useRef();  function handleClick() {Input.current.focus();  }  return (    <div>      <input        type="text"        ref={Input} />      <input        type="button"        value="Focus the input"        onClick={handleClick}      />    </div>  );}

Original Link: https://dev.to/hasnain01hub/refs-in-react-2pe3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To