Read More

Create a React component that displays a paragraph of text and allows users to expand or collapse it. The component should display a truncated version of the text by default, with a button to toggle between "Read More" and "Read Less". This improves readability and user experience, especially for long content blocks.

Requirements

• The component must:
  • Display a short preview of a longer paragraph initially (e.g., first 100 characters followed by "...").
  • Show the full text when toggled.
  • Provide a button labeled "Read More" when the text is collapsed.
  • Change the button label to "Read Less" when the full text is expanded.
  • Toggle the text content and button label immediately on click.

Data Test IDs (Required for Testing)

• data-testid="readmore-text": The paragraph element displaying either truncated or full text.
• data-testid="readmore-button": The button used to toggle the text expansion.

Reference UI