Is it possible to open another functional component upon firing an event within a functional component in React?

Question

I wonder if it is possible to render (or open) a Functional (Stateless) component within another Functional component upon for example onClick event? Let's assume the following primitive component;

const FunctionalComponent = () => {
    <div>
        <h1>Don't snub me because I'm primitive </h1>
        <a href="#" onClick={handleClick}>
            Click to open another functional component
        </a>
    </div>
};

Is there a way to open another functional component upon clicking the link (or button , etc.)?

Notice that I am trying to understand if this is doable without using the State Object of the React Class or React Router .

More generally, I am looking for the best practice in rendering different React components upon triggering an event .

Answer 1

This is not possible to do entirely within this component, because it's stateless . However, you could pass two props, isOtherComponentShown and onClick to this component from its parent (stateful) component, and control the rendering of your other component that way.