Currently, I am combining tailwind, react, and nextjs to develop a website. My goal is to implement the check radio button technique to dynamically display different content on the website without relying on JavaScript. To streamline data management, I am considering using an array of objects like [{name: string, content: string}, ...]. The specific section of tailwind documentation that guided me through this process can be found here: differentiating peers
I am thinking about replacing the
class="peer/draft"
with
className={`peer/${item.name}`}`
since it is enclosed within the array.map((item) => { ... }) loop.
The following code snippet successfully accomplishes the task because:
If I directly use the compiled pure HTML code generated by nextjs in the client-side browser, the sibling elements interact seamlessly.
However, if I allow nextjs to compile and deliver the HTML code to the client browser, it fails to respond when a radio button is clicked!
Below is an example of my code including relevant data:
export default function page() {
const jobs = [
{
name: "walker",
id: "wlk",
conditions: "20 an hour",
content: "walk and walk"
},
{
name: "sitter",
id: "sit",
conditions: "20 an hour",
content: "sit and sit"
},
]
return (
<section id="careerHome">
<div className="container grid md:grid-cols-2">
{jobs.map((item) => {
return (
<div
key={item.id}
className="shadow-lg p-10 text-center capitalize flex-1 mt-6 rounded-md flex flex-col relative"
>
<h3>
{item.name}
</h3>
<input id={item.id} className={`peer/${item.id}`} type="radio" name={item.id} />
<b className="text-start">Learn More</b>
<div className="h-4"></div>
<input id={`${item.id}Close`} className={`peer/${item.id}Close`} type="radio" name={item.id} />
<b className="text-start">Close</b>
<div className={`hidden peer-checked/${item.id}:block absolute top-20 right-[10%]`}>
<p>{item.conditions}</p>
</div>
<div className={`hidden peer-checked/${item.id}:block`}>
<p>{item.content}</p>
</div>
</div>
)
})}
</div>
</section>
)
}
Each block should consist of two buttons - one for opening and one for closing the block.
Is there a way to utilize generative functions to assign tailwind classes?
If you have suggestions on better practices or recommendations, please feel free to share your insights!