Hello I am new to typescript and I have job to do here.
I need to make dynamic class, something like in this code bellow.
import React, { ReactNode, useState } from "react";
interface Props {
text: ReactNode;
}
const ListItem = ({ text }: Props) => {
let [showMore, setShowMore] = useState(false);
return (
<div className="item">
<div>
<div className={`text ${showMore ? "active" : ""}`}>{text}</div>
</div>
<button onClick={() => setShowMore((s) => !s)}>Show more</button>
</div>
);
};
But I need to implement it to this code and I have no idea how to do it, because I don’t understand this syntax from someone who wrote it.
When I try to implement previous code, I have problem with react hooks rendering in this syntax.
I hope you understand my problem
type DeliveryBranchHitProps = {
hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({
hit: delivery_branch,
}: DeliveryBranchHitProps): JSX.Element => (
<>
<div className={`branch-opening-week ${showMore ? "active" : ""}`}>
<p>
<span className="branch-day">Monday:</span>
{delivery_branch.opening_monday}
</p>
<button onClick={() => setShowMore((s) => !s)}>Show more</button>
</div>
</>
);