Dave Ceddia Hook useState

DaveCeddia_Hook_useState.js

// Dave Ceddia Hook useState example
// https://www.youtube.com/watch?v=Y8GdPk88Ejg
import React, { useState } from "react";
import ReactDOM from "react-dom/client";

const RevealText = ({ text, maxLength }) => {
  const [hidden, setHidden] = useState(true);

  if (text.length <= maxLength) {
    return <span>{text}</span>;
  }

  return (
    <span>
      {hidden ? text.substr(0, maxLength) : text}
      {hidden ? (
        <a onClick={() => setHidden(false)}> read more</a>
      ) : (
        <a onClick={() => setHidden(true)}> read less</a>
      )}
    </span>
  );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RevealText
    maxLength={32}
    text={`Focused, hard work is the real key to success. Keep your eyes on the goal, and just keep taking the next step towards completing it.`}
  />
);