#StackBounty: #javascript #reactjs #redux #use-ref #react-forwardref React UseRef and forwardRef issue for an element position

Bounty: 100

I have successfully connected my component Details.js in order to manage the state out of the component itself, these are the steps:

You can see the demo here


import React, { useState, useEffect, useRef, ref, useImperativeHandle, forwardRef } from "react";

  const cleanValue = () => {

  useImperativeHandle(fowardedRef, () => {
    return {
      cleanValue: cleanValue

const ConnectedDetails = connect(

export default forwardRef((props, ref) => {
  return <ConnectedDetails {...props} fowardedRef={ref} />;


const ref = useRef();  
<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
<Details ref={ref} />

It works ,the demo is here.

My problem is when i move this element from App.js to Leagues.js as you can see in the demo ( there are both cases )


Line 71

<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>

i get this error when i click on it => TypeError Cannot read property ‘cleanValue’ of undefined

Is it possible ? If yes, what am i doing wrong and how can i fix that?

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.