Deliverable.tsx

import React, { useState, useEffect, ChangeEvent } from 'react';
import styles from './Deliverable.module.css';

const Deliverable: React.FC<> = ({cogIssue, setcogIssue, projName, linkToDeliverable}) => {
  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
    setcogIssue(event.target.value);
  };

  return (
    <div className={`${styles.sideBySideItem2} flex flex-col`}>
      <h2> <strong>Take a look at {projName}&apos;s deliverable. Write down any cognitive issues that you see with their deliverable. 
        Then select the model for that cog issue from the library to view it in the right panel.</strong></h2>
      <br></br>
      <a className="underline" href={linkToDeliverable}><b>Link to Deliverable</b></a>
      <a className="underline" href={linkToDeliverable}><b>Link to Reflection</b></a>
      <h2><br></br>Cognitive Issues with their Deliverable:</h2>
      <textarea 
        className={`${styles.textArea} flex-grow`}
        value={cogIssue} 
        onChange={handleInputChange} 
        placeholder="Enter your questions here...">
      </textarea>
    </div>
  );
};

export default Deliverable;