Transfer JS to TSX file, typescript ReadOnlyRow.js const ReadOnlyRow = ({ contact, handleEditClick, handleDeleteClick}) => { return ( {contact.name} {contact.title} {contact.term} {contact.language} handleDeleteClick(contact.id)}> Drop );

Transfer JS to TSX file, typescript

ReadOnlyRow.js

const ReadOnlyRow = ({ contact, handleEditClick, handleDeleteClick}) => {
return (

{contact.name}
{contact.title}
{contact.term}
{contact.language}




);
};

export default ReadOnlyRow;

------------------------------

EditableRow.js

import React from "react";

const EditableRow = ({
editFormData,
handleEditFormChange,
handleCancelClick,
}) => {
return (


type="text"
required="required"
placeholder="Enter aname..."
name="fullName"
value={editFormData.fullName}
onChange={handleEditFormChange}
>


type="text"
required="required"
placeholder="Enter anaddress..."
name="address"
value={editFormData.address}
onChange={handleEditFormChange}
>


type="text"
required="required"
placeholder="Enter a phonenumber..."
name="phoneNumber"
value={editFormData.phoneNumber}
onChange={handleEditFormChange}
>


type="email"
required="required"
placeholder="Enter anemail..."
name="email"
value={editFormData.email}
onChange={handleEditFormChange}
>


Save



);
};

export default EditableRow;

-------

App.js

import React, { useState, Fragment } from "react";
import { nanoid } from "nanoid";
import "./App.css";
import data from "./coursePool";
import ReadOnlyRow from "./components/ReadOnlyRow";
import EditableRow from "./components/EditableRow";

const App = () => {
const [contacts, setContacts] = useState(data);
const [addFormData, setAddFormData] = useState({
name: "",
title: "",
term: "",
language: "",
});

const [editFormData, setEditFormData] = useState({
name: "",
title: "",
term: "",
language: "",
});

const [editContactId, setEditContactId] =useState(null);

const handleAddFormChange = (event) => {
event.preventDefault();

const fieldName =event.target.getAttribute("name");
const fieldValue = event.target.value;

const newFormData = { ...addFormData };
newFormData[fieldName] = fieldValue;

setAddFormData(newFormData);
};

const handleEditFormChange = (event) => {
event.preventDefault();

const fieldName =event.target.getAttribute("name");
const fieldValue = event.target.value;

const newFormData = { ...editFormData };
newFormData[fieldName] = fieldValue;

setEditFormData(newFormData);
};

const handleAddFormSubmit = (event) => {
event.preventDefault();

const newContact = {
id: nanoid(),
name: addFormData.name,
title: addFormData.title,
term: addFormData.term,
language: addFormData.language,
};

const newContacts = [...contacts,newContact];
setContacts(newContacts);
};

const handleEditFormSubmit = (event) => {
event.preventDefault();

const editedContact = {
id: editContactId,
name: editFormData.name,
title: editFormData.title,
term: editFormData.term,
language: editFormData.language,
};

const newContacts = [...contacts];

const index = contacts.findIndex((contact) =>contact.id === editContactId);

newContacts[index] = editedContact;

setContacts(newContacts);
setEditContactId(null);
};

const handleEditClick = (event, contact) => {
event.preventDefault();
setEditContactId(contact.id);

const formValues = {
name: contact.name,
title: contact.title,
term: contact.term,
language: contact.language,
};

setEditFormData(formValues);
};

const handleCancelClick = () => {
setEditContactId(null);
};

const handleDeleteClick = (contactId) => {
const newContacts = [...contacts];

const index = contacts.findIndex((contact) =>contact.id === contactId);

newContacts.splice(index, 1);

setContacts(newContacts);
};

return (

{contacts.map((contact)=> (

{editContactId === contact.id ? (
editFormData={editFormData}
handleEditFormChange={handleEditFormChange}
handleCancelClick={handleCancelClick}
/>
) : (
contact={contact}
handleEditClick={handleEditClick}
handleDeleteClick={handleDeleteClick}
/>
)}

))}

Name	Title	Term	Language	Actions

Add a Course

--for developer useonly

type="text"
name="name"
required="required"
placeholder="enter coursename"
onChange={handleAddFormChange}
/>
type="text"
name="title"
required="required"
placeholder="enter a courseid"
onChange={handleAddFormChange}
/>
type="text"
name="term"
required="required"
placeholder="enter a term"
onChange={handleAddFormChange}
/>
type="language"
name="language"
required="required"
placeholder="enter typelanguage"
onChange={handleAddFormChange}
/>
Add

);
};

export default App;