tabbed app with buttons to switch tab

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/AlternativeBody.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+class AlternativeBody extends React.Component{
+    render() {
+        return (
+            <div>Second page!</div>
+        );
+    }
+}
+
+export default AlternativeBody;

src/App.css

@@ -1,38 +1 @@
-.App {
-    text-align: center;
-}
 
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
-}
-
-.App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-}
-
-.App-link {
-    color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

src/App.js

@@ -1,42 +1,44 @@
 import React from 'react';
-import logo from './logo.svg';
 import './App.css';
-import ReactDOM from "react-dom";
+import MainBody from "./MainBody";
-import TodoApp from "./Zwei"
+import AlternativeBody from "./AlternativeBody"
+import ReactDOM from 'react-dom';
 
-function App() {
+class App extends React.Component {
-    return (
+    page1click() {
-        <div className="App">
+        console.log("click page1");
-            <header className="App-header">
+
-                <img src={logo} className="App-logo" alt="logo"/>
+        // rerender mainbody space here
-                <p>
-                    Edit <code>src/App.js</code> and save to reload.
-                </p>
-                <a
-                    className="App-link"
-                    href="https://reactjs.org"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Learn React
-                </a>
-                <button>klick me to get to another pagexD</button>
-                <button className="square" onClick={
-                    () => {
-                        console.log("rerendering dom");
         ReactDOM.render(
-                            <React.StrictMode>
+            <MainBody/>,
-                                <TodoApp />
+            document.getElementById("mainbody")
-                            </React.StrictMode>,
-                            document.getElementById('root')
         );
     }
-                }>
+
-                    blabla
+    page2click() {
-                </button>
+        console.log("click page2");
-            </header>
+
+        // rerender mainbody space here
+        ReactDOM.render(
+            <AlternativeBody/>,
+            document.getElementById("mainbody")
+        );
+    }
+
+    render() {
+        return (
+            <div className="App">
+                <div>
+                    <button onClick={() => this.page1click()}>Page1</button>
+                    <button onClick={() => this.page2click()}>Page2</button>
+                </div>
+                <div id="mainbody">
+                    mimimimimi
+                </div>
+
             </div>
         );
     }
+}
 
 export default App;

src/MainBody.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+class MainBody extends React.Component {
+    render() {
+        const requestOptions = {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ title: 'React POST Request Example' })
+        };
+        fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
+            .then(response => response.json())
+            .then(data => this.setState({ postId: data.id }));
+        return (
+            <div>Hey from other class</div>
+        );
+    }
+}
+
+export default MainBody;