Show more/less text

[jeromecauchon]

I found a way to show more text but i cannot figured out how to show less text. Once expanded, the textTruncateChild disappear.

const [expanded, setExpanded] = useState(false);
  return (
      <TextTruncate
          line={expanded ? 2000 : props.lines}
          element="span"
          truncateText="…"
          text={props.text}
          textTruncateChild={<a onClick={() => {setExpanded(!expanded)}}>{expanded?'less': 'more'}</a>}
      />
  );

[jeromecauchon]

This is how i make it work.

const [expanded, setExpanded] = useState(false);
return (
    {expanded ? (
      <Typography>
        {props.text}
        <a
          href='#'
          style={{ color: 'red' }}
          onClick={() => {
            setExpanded(!expanded);
          }}>
          {props.readLessText}
        </a>
      </Typography>
    ) : (
      <TextTruncate
        line={props.lines}
        truncateText='…'
        text={props.text}
        textTruncateChild={
          <a
            href='#'
            style={{ color: 'red' }}
            onClick={() => {
              setExpanded(!expanded);
            }}>
            {props.readMoreText}
          </a>
        }
      />
    )});