Frontend Engineering with React

// A card your users can actually tab to
export default function JobCard({ job, onSave }) {
  const [saved, setSaved] = useState(false);

  function toggle() {
    setSaved(!saved);
    onSave(job);
  }

  return (
    <article className="card h-100">
      <h3>{job.title}</h3>
      <p>{job.company}, {job.city}</p>
      <button aria-pressed={saved} onClick={toggle}>
        {saved ? 'Saved' : 'Save job'}
      </button>
    </article>
  );
}