In React, I have a Parent
component which displays and animates several Childs (Child0
, Child1
, Child2
based on a tab
variable (0
, 1
or 2
)
...
export default Parent = ({prop1, prop2, prop3}) => {
const [tab, setTab] = useState(0);
...
return (
<>
{tab === 0 && <Child0 prop0={prop0}/>}
{tab === 1 && <Child1 prop1={prop1}/>}
{tab === 2 && <Child2 prop2={prop2}/>}
</>
);
}
Child components consist of forms that make changes to their respective parent props on save.
The problem is obvious: when I hit the Save button
in any Child form, the Parent
is rerendered (as its props change), and if I was working on Child1
or Child2
components, it just transitions to Child0
(see the default tab
value to 0 on Parent
).
How can I deal with this situation?
Or even better… Is there a better component distribution to avoid this problem?
Thanks in advance.