Tinkering with create-react-web-component

App.js

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  
  const [title, setTitle] = useState("Web Components rock");
  
  return (<div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <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>
    </header>
          
    <section>
      <button onClick={() => {
        const newTitle = `${title}!`;
        console.log("New title: " + newTitle);
        setTitle(newTitle);
      }}>toggle title</button>
      <web-component componentTitle={title} />
    </section>
  </div>
  );
}

export default App;