Key the PrimaryMarker with destination presence.

This is how React recommend dealing with derived state that needs to be
reset:
https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html

The problem is that the new turn will give the component new props, but
new props will not cause the state to be reset. We can either do that
manually (which React recommends only for the cases where it is
absolutely necessary:
https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops),
or by forcing the component to be replaced by using a key.

Fixes https://github.com/dcs-liberation/dcs_liberation/issues/2388.
This commit is contained in:
Dan Albert 2022-10-09 16:11:26 -07:00
parent c9d49f6f40
commit eee0039add

View File

@ -215,7 +215,10 @@ interface MobileControlPointProps {
export const MobileControlPoint = (props: MobileControlPointProps) => { export const MobileControlPoint = (props: MobileControlPointProps) => {
return ( return (
<> <>
<PrimaryMarker controlPoint={props.controlPoint} /> <PrimaryMarker
controlPoint={props.controlPoint}
key={props.controlPoint.destination ? 0 : 1}
/>
<SecondaryMarker <SecondaryMarker
controlPoint={props.controlPoint} controlPoint={props.controlPoint}
destination={props.controlPoint.destination} destination={props.controlPoint.destination}