Breaking News: Grepper is joining You.com. Read the official announcement!

pass values and functions from a Child component to a Parent using a ref

Cutecub Follower answered on March 21, 2022 Popularity 7/10 Helpfulness 2/10

answer pass values and functions from a Child component to a Parent using a ref

pass values and functions from a Child component to a Parent using a ref

Comment

// Parent Component
const App = () => {
  const ref = useRef();

  return (
    <div>
      <ComponentWithButton ref={ref} />
      <button onClick={() => ref.current.increment()}>another button</button>
    </div>
  );
};

// Child Component
const ComponentWithButton = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({increment}))

  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <div>
      <button onClick={increment}>click</button>
      <h2>Count: {count}</h2>
    </div>
  )
})

Popularity 7/10 Helpfulness 2/10 Language javascript

Source: dev.to

Tags: javascript parent ref using

Link to this answer
Share Copy Link

Contributed on Mar 21 2022

Cutecub Follower

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

pass values and functions from a Child component to a Parent using a ref

Contents

More Related Answers

pass values and functions from a Child component to a Parent using a ref

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.