Chained components

Author: jamesridgway

src/App.tsx

@@ -1,21 +1,20 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { useState } from 'react';
+import { EditTitle } from './EditTitle';
 import { PageTitle } from './PageTitle';
-import { StateDemo } from './StateDemo';
 
 function App() {
 
+  const [pageTitle, setPageTitle] = useState<string>("Example Page");
 
   return (
     <div>
-      <PageTitle title="My Page" />
-      {/* <PageTitle title="My Other Page" /> */}
+      <PageTitle title={pageTitle} />
       <hr />
-      <StateDemo initalValue={10} multipleOfTen={(val) => { alert(val); }} />
+      <EditTitle onChange={(name) => setPageTitle(name)} />
+      {/* <StateDemo initalValue={10} multipleOfTen={(val) => { alert(val); }} /> 
       <hr />
-      <StateDemo initalValue={-100} />
+      <StateDemo initalValue={-100} /> */}
     </div>
   );
 }

src/EditTitle.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+type Props = {
+  onChange: (newTitle: string) => void;
+};
+
+type State = {
+  value: string;
+};
+
+export class EditTitle extends React.Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      value: "",
+    };
+  }
+
+  changeTitle() {
+    this.props.onChange(this.state.value);
+  }
+
+
+  render() {
+    return (
+      <>
+        <form>
+          <input type="text" value={this.state.value}
+           onChange={(e) => this.setState({ value: e.target.value })} />
+          <button onClick={() => this.changeTitle()} type="button">Change</button>
+        </form>
+      </>
+    );
+  }
+}

src/PageTitle.tsx

@@ -6,13 +6,9 @@ type Props = {
 
 export class PageTitle extends React.Component<Props> {
 
-  constructor(props: Props) {
-    super(props);
-  }
-
   render() {
     return (
-      <h1 style={{color: 'red'}}>{this.props.title}</h1>
+      <h1>{this.props.title}</h1>
     );
   }
 }