SetFontSize button

solution.js

// App
import React, { useState } from "react";
import Content from "./Content";
import Header from "./Header";

function App () {
  const [loggedIn, setLoggedIn] = useState(false);
  const toggleLoggedIn = () => setLoggedIn(!loggedIn);
  const [fontSize, setFontSize] = useState(12);
  const increaseSize = () => setFontSize(fontSize+2);
  return (
    <div>
      <Header loggedIn={loggedIn} handleLoggedInClick={toggleLoggedIn} handleSizeClick={increaseSize} />
      <Content loggedIn={loggedIn} fontSize={fontSize} />
    </div>
  );
}

export default App;


// Header
import React from "react";

function Header (props) {
  const { loggedIn, handleLoggedInClick, handleSizeClick } = props;
  return (
    <div>
    <button onClick={handleLoggedInClick}>
      {loggedIn ? "Log Out" : "Log In"}
    </button>
    <button onClick={handleSizeClick}>
      increase size
    </button>
    </div>
  );
}


export default Header;

// Content 

import React from "react";

function Content (props) {
  const { loggedIn, fontSize } = props;
  return loggedIn && <p  style={{ fontSize: fontSize }}>CONTENT</p>;
}

export default Content;