Warunkowe renderowanie komponentów

Dzień dobry,
Jak zrobić coś takiego:
Mam dwa komponenty powiedzmy o nazwie <A/> i <B/> oraz diva który przyjmijmy że ma taką postać <div id='test'>.
Teraz jak zrobić że po kliknięciu przycisku nr1 w zawartości diva o id ,,test" pojawi mi się komponent <A/>, natomiast gdy kliknę przycisk nr2 to w divie o id "test" pojawi mi się komponent <B/>. Próbowałem zrobić coś w swoim zakresie, ale niestety cała zawartość zamiast zostać podmieniona, została dodana w kolejnym wierszu lub obok poprzednio dodanego komponentu.

Pozdrawiam,
Łukasz

Jest kilka sposobów żeby to osiągnąć. Myślę, że najprostszym jest warunkowe wyświetlanie.
Najpierw dodaj zmienną, przechowując identyfikator komponentu, jaki chcesz wyświetlać (może to być cokolwiek, na przykład "a"/"b", ale ja posłużę się 0/1).

const [componentId, setComponentId] = useState(0);

Teraz możemy założyć, że 0 odpowiada komponentowi <A/>, a 1 komponentowi <B/>.

Następnie do przycisków musisz dodać możliwość zmiany komponentu. Zrobimy to za pomocą listenera onClick.
Na przykład dla przycisku nr1 będzie to wyglądało:

<button onClick={()=>setComponentId(0)}

No i teraz wystarczy to wyświetlić warunkowo.

return(
  <div className="test">
    {componentId === 0 && (<A/>)}
    {componentId === 1 && (<B/>)}
  </div>
)

Drugim sposobem jest przypisanie komponentu do zmiennej. Ponownie deklarujemy zmienną przechowującą jakiś identyfikator komponentu do wyświetlenia. Tym razem wykorzystam do tego stringa.

const [componentId, setComponentId] = useState("A");

teraz deklarujemy obiekt, który przechowuje nasze komponenty

const components = {
  A: <A/>,
  B: <B/>,
}

Analogicznie dodajemy listenery

<button onClick={()=>setComponentId("A")}

Na koniec wyświetlamy odpowiedni komponent

return(
  <div className="test">
    { components[componentId] }
  </div>
)

Przykłady na CodeSandbox
https://codesandbox.io/s/bold-firefly-fci9jo?file=/src/App.js