Hide and show number of characters in <p>

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 ?

CodePudding user response：

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>
  );
}