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>
+        ReactDOM.render(
-                    Edit <code>src/App.js</code> and save to reload.
+            <MainBody/>,
-                </p>
+            document.getElementById("mainbody")
-                <a
+        );
-                    className="App-link"
+    }
-                    href="https://reactjs.org"
+
-                    target="_blank"
+    page2click() {
-                    rel="noopener noreferrer"
+        console.log("click page2");
-                >
+
-                    Learn React
+        // rerender mainbody space here
-                </a>
+        ReactDOM.render(
-                <button>klick me to get to another pagexD</button>
+            <AlternativeBody/>,
-                <button className="square" onClick={
+            document.getElementById("mainbody")
-                    () => {
+        );
-                        console.log("rerendering dom");
+    }
-                        ReactDOM.render(
+
-                            <React.StrictMode>
+    render() {
-                                <TodoApp />
+        return (
-                            </React.StrictMode>,
+            <div className="App">
-                            document.getElementById('root')
+                <div>
-                        );
+                    <button onClick={() => this.page1click()}>Page1</button>
-                    }
+                    <button onClick={() => this.page2click()}>Page2</button>
-                }>
+                </div>
-                    blabla
+                <div id="mainbody">
-                </button>
+                    mimimimimi
-            </header>
+                </div>
-        </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;

src/Zwei.js

@@ -3,7 +3,7 @@ import React from 'react';
 class TodoApp extends React.Component {
     constructor(props) {
         super(props);
-        this.state = { items: [], text: '' };
+        this.state = {items: [], text: ''};
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
     }
@@ -12,7 +12,7 @@ class TodoApp extends React.Component {
         return (
             <div>
                 <h3>TODO</h3>
-                <TodoList items={this.state.items} />
+                <TodoList items={this.state.items}/>
                 <form onSubmit={this.handleSubmit}>
                     <label htmlFor="new-todo">
                         What needs to be done?
@@ -31,7 +31,7 @@ class TodoApp extends React.Component {
     }
 
     handleChange(e) {
-        this.setState({ text: e.target.value });
+        this.setState({text: e.target.value});
     }
 
     handleSubmit(e) {