#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

Details.js

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

  const cleanValue = () => {
    setDataHomeTeam([]);
    setDataAwayTeam([]);
  };

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

const ConnectedDetails = connect(
  mapStateToProps,
  mapDispatchToProps,
  null
)(Details);

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

App.js

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 )

Leagues.js

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.