StudyPlanCard.js

import { Link } from "react-router-dom";
import PlanLineList from "./PlanLineList";

const StudyPlanCard = ({ renList }) => {
  
  return (
    <Link className="card text-decoration-none link-dark mb-3" style={{ width: "20rem" }} to={`/studyplan/${renList.id}`}>
      <div className="card-body">
        <div className="d-flex">
          <h5 className="card-title col-10 text-nowrap" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{renList.name}</h5>
          <div className="col-2 d-flex justify-content-end">
            <Link className="text-decoration-none link-dark" to={`/subject/edit/${renList.id}`}><i className="bi bi-pencil-square pe-2"></i></Link>
            <i className="bi bi-trash"></i>
          </div>
        </div>
        <p className="card-subtitle ms-1 mb-2 text-muted">{renList.prof && renList.room ? renList.prof + ' - ' + renList.room : (renList.prof || renList.room)}</p>
        <PlanLineList subjectId={renList.id} planList={renList.planList} />
      </div>
    </Link>
  )
}

export default StudyPlanCard;