a.jsx

function Example({text, maxLength}) {
 // define hidden state default init value is true and 
 // setHidden function to update state
 const [hidden, setHidden] = useState(true);
 
 // on click we change the state of hidden and trigger re-render of the view
  return (
    <span>
      {hidden ? (
        <a onClick={() => setHidden(false)}> read more</a>
      ) : (
        <a onClick={() => setHidden(true)}> read less</a>
      )}
    </span>
  );
}

export default Example;