I have a <p> with a paragraph inside and a button.
I would like to display 40 characters when I click the button. And display the entire paragraph if I click on it again.
Here is my code :
const [showText, setShowText] = useState(false)
<div>
<ImCross onClick={() => setShowText(!showText)} />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque consectetur debitis deserunt dicta dignissimos est et excepturi facere facilis fugit id in, ipsa quae reiciendis repellendus suscipit unde veniam voluptas.</p>
</div>
<ImCross /> is the button to hide and show text.
Now I'm totaly lost on how can I get the .length of the <p>, and change the number displayed on click.
Any help ?
You could create a truncate function, and use it when the show more button has been clicked.
I found a truncate function from this answer.
So your code might look something like:
// create a function that only returns a certain amount of characters.
// i've just used 5 as it's what the original stack question did
const truncate = (input) =>
input.length > 5 ? `${input.substring(0, 5)}...` : input;
function App() {
// create a toggle state
const [showTruncate, setShowTruncate] = useState(true);
let content =
"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque consectetur debitis deserunt dicta dignissimos est et excepturi facere facilis fugit id in, ipsa quae reiciendis repellendus suscipit unde veniam voluptas";
// when the toggle is active, show the truncated text
// if not, show the text in full.
return (
<div className="App">
<button onClick={() => setShowTruncate(!showTruncate)}>Show more</button>
<p>{showTruncate ? truncate(content) : content}</p>
</div>
);
}