how to display a state which is passed as an object to another screen in react native

Question

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>

I am passing this inState to another screen in the following manner:

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

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

const ChartScreen = (props: any) => {
    const {inState} = props.route.params;
    useEffect(() => {
    console.log('>>>>>>>>>', inState);
}, []);
    return (
        <View>
            {inState}    // getting error here
        </View>
    );
};

I have console the inState, which looks like this:

{
    "0": <ForwardRef />, 

    "1": <React.Fragment>
            <StatusBoxComponent 
                ImageConfigIconCheckOut={true} 
                status="Break-In" 
                time="17:51:40" 
            />
        </React.Fragment>, 
        
    "2": <React.Fragment>
            <StatusBoxComponent 
                ImageConfigIconCheckOut={true} 
                status="Break-Out" 
                time="17:51:42" 
            />
        </React.Fragment>
}

How can I display the multiple StatusBoxComponent on my second screen?

Answer 1

You are displaying initially an array, but by calling Object.assign({}, inState) you're creating an object. Where you're getting the error, you're attempting to render that object, not an array of components. Try using Object.values to get only the values and virtually "restore" your initial array.

const ChartScreen = (props: any) => {
    const {inState} = props.route.params;
    useEffect(() => {
    console.log('>>>>>>>>>', inState);
}, []);
    return (
        <View>
            {Object.values(inState)}    // getting error here
        </View>
    );
};