building a component that takes a value (

), and only displays the first 40 characters, unless the
<Chevron onClick
is triggered which means I then want to show
has opposed to the
– ideally this would render similar to how it does currently only adding perhaps doubling the height of the
component to allow the rest of the content to fit. I know I’m still a bit off but some pointers for my next steps/ ideas for improving what I have already would be really appreciated!

// @flow
import styled from "styled-components";
import chevron from "../Assets/chevron-icon.svg";

type Props = { attribute: AttributeType, className?: string };

const Accordion = styled.div`
  background-color: #e5e9eb;
  height: 56px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;
  display: flex;
  align-items: center;

  span {
    padding-left: 24px;

const Chevron = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;

const ExpandableString = ({ attribute, className }: Props) => {

  const fullDescription = attribute.readonlyvalue;
  const shortHeading = fullDescription.substring(0, 40) + '...';
  const isExpanded = false;

  function toggleContent() {
    isExpanded = true;

  return (
    <Accordion className={className}> 
      <Chevron onClick={toggleContent} src={chevron} alt="Expand or collapse content" />

export default ExpandableString;

Anonymous Asked question May 13, 2021