React hooks - Dispatching a reset state from parent component

Question

This is my application with the scenario reproduced, here the demo in codesandbox

I have two components, Leagues ( parent ) and Details ( Child ).

I have a implemented reset button example in the Details Component button which does

 const cleanArray = () => {
   setDataHomeTeam([]);
 };

<button onClick={cleanValue} type="button">Reset</button>

You can see in the demo that is emptying out an array of a team stat

My question is, can i implement the same button but out from Details component and from the parent component Leagues for example? Whats the way to achieve it?

I thought to go this way but i can not get it done.

So in my Details.js

let Details = forwardRef(({ ....

  const cleanArray = () => {
    setDataHomeTeam([]);
  };

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

in App.js

    <Leagues/>
    <button onClick={cleanValue} type="button">Reset</button>
    <Details ref={ref} />

I get this error : 'cleanValue' is not defined no-undef

is it something that i can not do with react? How can i achieve it?

tell me what you are trying to achieve. do you want to change the state of the child component from the parent or do you want to change the state of parent from chiuld — Sujit.Warrier, Sep 19 '20 at 12:37
Anytime i change the league, i want to empty the array i created from the last team selected, so i want to change the state of the child component from the parent in this case. Hope it is clear, thanks — Koala7, Sep 19 '20 at 12:39
I have edited the question to make it clearer, the parent is Leagues and the child is Details — Koala7, Sep 19 '20 at 12:44
let me rephrase. you have mentioned that you want to use useImperativeHandle. this is only used when you want to trigger a function in the child component from the parent component by adding a ref to the child. So what Im asking is what is the relationship between leagues and details component. — Sujit.Warrier, Sep 19 '20 at 12:49
I need to understand which Hook i have to use to achieve that, the Leagues gets the leagues names, and the details component the team names of the leagues and the stats ( matches played for example ) — Koala7, Sep 19 '20 at 12:56

tmhao2005 · Accepted Answer · 2020-09-21T10:52:12.583

1

I think your approach sounds correct except for lacking the way of calling the api cleanValue you exposed. Basically you have to call it via a ref you pass to it as following:

function App() {
  const ref = useRef();

  return (
    <>
      <Leagues />
      {/* call it via ref */}
      <button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
      <Details ref={ref} />
    </>
  )
}

Codesandbox link: https://codesandbox.io/s/nifty-raman-c0zff?file=/src/components/Details.js

edited Sep 21 '20 at 10:52

answered Sep 21 '20 at 10:20

tmhao2005

14,776
2
37
44

Thanks, i have tried but i still get the error TypeError Cannot read property 'cleanValue' of null when i click on – Koala7 Sep 21 '20 at 10:28
1

It looks like you implemented the `
` in a wrong way as both connecting with Redux + using fowardRef. Check the sandbox where I fixed for you – tmhao2005 Sep 21 '20 at 10:51

Ahmed Magdy · Answer 2 · 2020-09-19T13:55:06.167

0

I don't completely understand what you are trying to do, but here is a solution I think is going to work for your problem

let's say you wanna filter that array with the selected team which is liverpool, first if you have control over the incoming data I recommend changing the obj in the array likethis {day : 16 , teamName:"liverpool"}, this is going to help you filter that array later,

then you useEffect & useState to update that array

 [teams, setTeams] = useState([]);
  // the array changes here {day: 1 , teamName : "sao paulo"} , {day:2 ,teamname:"liverpool"}] 

 useEffect(()=>{
 setTeams((T)=>{
   return T.filter((oneTeam)=>{
           return oneTeam.teamName == selectedTeam;
     });
})
},[teams,selectedTeam]);

edited Sep 19 '20 at 13:55

answered Sep 19 '20 at 13:08

Ahmed Magdy

1,054
11
16

Thanks, i want dynamically get rid of the last team selected columns when i change the league, so when i select Premier League, Sao Paulo columns have to removed for the Liverpool Columns – Koala7 Sep 19 '20 at 13:50
yea my code should work for your problem anything the selected team changes it will updated the whole `teams` array let me just make a minor update for you. – Ahmed Magdy Sep 19 '20 at 13:54
Thanks, i think i am asking something bit more complicated, if you want to show in my codesandbox, it is better – Koala7 Sep 19 '20 at 14:16

React hooks - Dispatching a reset state from parent component

2 Answers2