How to pass value stored in state to another screen in react native-CodePudding

So I have created a state like :

const [inState, setInState] = useState([<View />]);

Then on click of some buttons, I am updating inState

const breakOutClick = () => {
    setInState([
        ...inState,
        <>
            <StatusBoxComponent
                ImageConfigIconCheckOut={true}
                status={'Break-Out'}
                time={time}
            />
        </>,
    ]);
};

const breakInClick = () => {
    setInState([
        ...inState,
        <>
            <StatusBoxComponent
                ImageConfigIconCheckOut={true}
                status={'Break-In'}
                time={time}
            />
        </>,
    ]);
};

I am able to display everything stored in inState, on this same screen in this manner:

<View>
    {inState}
</View>

But I want to pass this inState to another screen and display everything stored in inState.

For This I tried the following:

props.navigation.navigate(ChartScreen, {
            inState: inState,
        });

Then on this second screen, i.e, ChartSCreen, I did the following:

const ChartScreen = (props: any) => {
    const {inState} = props.route.params;
    return (
        <View style={styles.screen}>
            {inState}
        </View>
    );
};

But on the second I am getting error TypeError: cyclical structure in JSON object, js engine: hermes.

I don't know what I am doing wrong, please help

CodePudding user response：

Try following to prevent cyclical structure:

props.navigation.navigate(ChartScreen, {
        inState: {…inState}
});

As alternative of … you can write:

props.navigation.navigate(ChartScreen, {
        inState: Object.assign({}, inState)
});