Last active
September 22, 2022 19:04
-
-
Save tunapotur/8bccab723f5147cb94fd28df10ca25af to your computer and use it in GitHub Desktop.
Dave Ceddia Hook useState
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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.`} | |
| /> | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment