Keeping the text data in a separate file.

import { accordianData } from "../data/AccordianData";

export const Landing = () => {
const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
const handleActiveAccordion = (index: number) => {
setActiveAccordion((prev) => {
const valuesToCheck = [null, ...accordianData.map(prop => prop.id)];
const elementExists = valuesToCheck.filter(prev => prev !== index).some(value => prev === value);
return elementExists ? index : null;
});
}

return (
<section className="md:flex md:flex-col-reverse md:items-center">
<h1 className="text-5xl md:text-7xl lg:text-8xl text-center mb-5 md:mb-0 sm:mt-8">Connect and Interact</h1>
<div className="md:w-[45rem] lg:w-[48rem] md:flex justify-between items-center sm:mt-12 md:mt-16">
<Authorization />
<div className="flex flex-col items-center space-y-3">
{accordianData.map((node, key) => {
return (
<Accordion
key={key}
onClick={() => handleActiveAccordion(node.id)}
title={node.title}
bodyVisible={activeAccordion === node.id}>
{node.body}
</Accordion>
);
})}
</div>
</div>
</section >
)
}
import { accordianData } from "../data/AccordianData";

export const Landing = () => {
const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
const handleActiveAccordion = (index: number) => {
setActiveAccordion((prev) => {
const valuesToCheck = [null, ...accordianData.map(prop => prop.id)];
const elementExists = valuesToCheck.filter(prev => prev !== index).some(value => prev === value);
return elementExists ? index : null;
});
}

return (
<section className="md:flex md:flex-col-reverse md:items-center">
<h1 className="text-5xl md:text-7xl lg:text-8xl text-center mb-5 md:mb-0 sm:mt-8">Connect and Interact</h1>
<div className="md:w-[45rem] lg:w-[48rem] md:flex justify-between items-center sm:mt-12 md:mt-16">
<Authorization />
<div className="flex flex-col items-center space-y-3">
{accordianData.map((node, key) => {
return (
<Accordion
key={key}
onClick={() => handleActiveAccordion(node.id)}
title={node.title}
bodyVisible={activeAccordion === node.id}>
{node.body}
</Accordion>
);
})}
</div>
</div>
</section >
)
}
I have this code that where I am mapping JSON data in the Accordian component. I was wondering whether is it good idea to do that or should I not bother with converting my text into JSON and then mapping it to a component. I do this practice because I think it makes the code look clean but now I am wondering is it really worth trouble?
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server