0

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 ?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
  • Use a ternary if and output two different strings? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator – evolutionxbox Feb 03 '22 at 13:26
  • @evolutionxbox good idea! Do you know how I can get the ```length``` og the ```p``` ? ```document.getElementById``` returns an error : ```possibly null``` –  Feb 03 '22 at 13:28
  • Why do you need that? You probably shouldn't be using `document.getElementById` with react. – evolutionxbox Feb 03 '22 at 13:29

1 Answers1

0

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>
  );
}
bopbopbop
  • 487
  • 3
  • 9