How to Show Additional Text

[lisaWriteJava]

When I click the show more the additional text doesn't show. It seems to reload the page

[hotgeart]

You can't.

But you can hack your way. When you click, you change the line to a ridiculous number.

const [line, setLine] = useState(2);

<TextTruncate
  line={line}
  element="span"
  truncateText="…"
  text={ user.description }
  textTruncateChild={<button onClick={()=>{ setLine(9999999999) }}>I want mooooore</button>}
/>

Or you just hide the real text and when you click, you show the real one and hide the truncated one.

const [showText, setShowText] = useState(false);

{showText ? (
  <>
    {user.description}
  </>
) : (
  <TextTruncate
    line={2}
    element="span"
    truncateText="…"
    text={user.description}
    textTruncateChild={<button onClick={() => { setShowText(true) }}>I want mooooore</button>}
  />
)}