I return this content from my ReviewPictures.tsx screen.
My problem is when i take a new Photo with my Photo Button
My SetState erase the previous Photos List
How to prevent my list to be deleted by my setState ?
The code :
ReviewPictures.tsx ->
const [content, setContent] = useState<JSX.Element[]>([]); const navigation = useNavigation<NavigationProp<PhotoshootStackParamList>>(); const Appnavigation = useNavigation<NavigationProp<AppStackParamList>>(); const toRedo = !params?.redo; useEffect(() => { setContent(setPageContent()); }, []); const setPageContent = () => { const c: JSX.Element[] = []; picturePaths.forEach((value: string, step: StepAlias) => { console.log(value); c.push(<View style={[styles.box, styles.row]}><Text>{I18n.t(`${step}`)}</Text><Image style={styles.image} source={{uri: value}} /><IconButton icon="camera" color={Colors.blue500} size={40} onPress={() => { console.log('Pressed'); Appnavigation.navigate('Logged', { screen: 'Onboarded', params: {screen: 'Photoshoot', params: {redo: toRedo, onboarded: false, review: step}}, }); }} /></View>, ); }); return c; }; return (<><ScrollView style={styles.container}>{content}</ScrollView><Button onPress={() => navigation.navigate('Mileage')}>Valider</Button></> );};
Photoshoot.tsx ->
const [steps, setSteps] = useState<Step[]>([]); const loadReviewScenario = () => { if (params?.review) { setSteps([fromStepAlias(params.review)]); setIsLoading(false); // HERE THE SETSTATE SUPRESS THE PREVIOUS CONTENT } };
The fromStepAlias coming from Step.ts ->
export const fromStepAlias = (stepAlias: StepAlias): Step => { console.log(stepAlias.split('_')); const split = stepAlias.split('_'); return {tyre: split[0] as TyrePosition, whichSideToTake: split[1] as PhotoType};};
What's wrong with my setSteps ?
const loadReviewScenario = () => { if (params?.review) { setSteps([fromStepAlias(params.review)]); setIsLoading(false); // HERE THE SETSTATE SUPRESS THE PREVIOUS CONTENT } };