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>
</>
);
Not quite sure I understand your question, but possibly you want to do something like this where you have a generic component that takes some content chilren.
interface Props {
text: ReactNode;
children: ReactNode;
}
const ListItem = ({ text, children }: Props) => {
let [showMore, setShowMore] = useState(false);
return (
<div className="item">
<div>
<div className={`text ${showMore ? "active" : ""}`}>
{text}
{children}
</div>
<button onClick={() => setShowMore((s) => !s)}>Show more</button>
</div>
</div>
);
};
type DeliveryBranchHitProps = {
hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({ hit: delivery_branch }: DeliveryBranchHitProps): JSX.Element => (
<>
<ListItem text={delivery_branch.name} />
<p>
<span className="branch-day">Monday:</span>
{delivery_branch.opening_monday}
</p>
</ListItem>
</>
);
Please check this post to understand const func = () => ( .. ) syntax Arrow function without curly braces
For now your function returns a single expression - i.e. some JSX. To add some additional logic you need to make your function multiline (pay attention to the braces):
const Func = (props) => {
// your hook goes here
let [state, useState] = useState();
// return the jsx
return ( .. )
}
UPD: so for your case it is:
type DeliveryBranchHitProps = {
hit: SearchIndex.DeliveryBranch;
};
const DeliveryBranchHit = ({
hit: delivery_branch,
}: DeliveryBranchHitProps): JSX.Element => {
let [showMore, setShowMore] = useState(false);
return (
<>
<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>
</>
);
}