Use fat arrow function to change React.Component in React-Native

Question

is it possible to render a React.Component over other React.Component using just fat arrow function, using state seems unnecessary in my case as there is no need to close the opened Component. I am trying to achieve the simplest to render a React.Component over other React.Component.

I am trying to do it like this:

<Button onPress={() => { return (<ShowOtherReactComponent/>); }} >Show OtherComponent</Button>

this is calling the <ShowOtherReactComponent/> I know that because I called an alert function from constructor but. nothing is rendering? why is that? how can I do this?

PS: this approach may be wrong, but still wanna see how it can be done. for science.

Answer 1

You shouldn't return jsx from your handlers. Usually to show and or toggle components conditional rendering is the way to go.

Instead of returning <ShowOtherReactComponent/> from onPress you conditionally render the component based on a boolean binded to the local state and change the state instead.

const Component = () =>{
    const [show, setShow] = useState(false)

    const onPress = () => setShow(true)

    return(
        <>
            <button onPress={onPress}> Show </button>
            { show && <ShowOtherReactComponent/> }
        </>
    )
}

Answer 2

I've made an example to show what you could potentially do if you wanted a button to add components to display:

import React from 'react';
import autoBind from 'react-autobind';

export default class ButtonTest extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            extraComponents : []
        };

        autoBind(this);
    }

    addComponent() {
        const newComponent = (<p>I'm a new component</p>);
        this.setState({extraComponents: [...this.state.extraComponents, newComponent]})
    }

    render() {
        return (
            <div>
                <button onClick={this.addComponent}>add component</button>

                {this.state.extraComponent}
            </div>
        )
    }
}

I've checked it and it works.

Answer 3

import React, { useState } from 'react'
import { SafeAreaView, View, Text, Button, Dimensions } from 'react-native'


const App = () => {

    const [visibilityOfOtherView, setvisibilityOfOtherView] = useState(false)
    const { height, width } = Dimensions.get('window')
    const SCREEN_HEIGHT = Math.round(height)
    const SCREEN_WIDTH = Math.round(width)

    return (
        <SafeAreaView style={{ height: SCREEN_HEIGHT, width: SCREEN_WIDTH, }}>

            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'red' }}>
                <Text style={{ marginBottom: 20 }}>
                    First Components
                </Text>
                <Button
                    title='Toggle Components View'
                    onPress={() => setvisibilityOfOtherView(!visibilityOfOtherView)}
                />
            </View>

            {
                visibilityOfOtherView ?
                    <View style={{ height: SCREEN_HEIGHT, width: SCREEN_WIDTH, alignItems: 'center', justifyContent: 'center', backgroundColor: 'green' }}>
                        <Text style={{ marginBottom: 20 }}>
                            Secound Components
                        </Text>
                        <Button
                            title='Toggle Components View'
                            onPress={() => setvisibilityOfOtherView(!visibilityOfOtherView)}
                        />
                    </View>
                    : null
            }

        </SafeAreaView>
    )
}

export default App