Hello everyone, I'm fairly new to TypeScript and I've been struggling to troubleshoot an error in my code. Can someone please assist me with solving this TypeScript error?
I keep getting the error message: "Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ 'sections.hero': ({ sectionData, key }: props) => Element; }'. No index signature with a parameter of type 'string' was found on type '{ 'sections.hero': ({ sectionData, key }: props) => Element; }'."
Here is my code :
type sectionDataProps = {
sectionData: {
__component: string;
};
};
// Map Strapi sections to section components
const sectionComponents = {
'sections.hero': Hero,
};
// Display a section individually
const Section = ({ sectionData }: sectionDataProps) => {
// Prepare the component
const SectionComponent = sectionComponents[sectionData.__component];
if (!SectionComponent) {
return null;
}
// Display the section
return <SectionComponent data={sectionData} />;
};
// Display the list of sections
const Sections = (props: { sections: [] }) => {
return (
<>
{/* Show the actual sections */}
{props.sections.map((section) => (
<Section
sectionData={section}
key={`${section.__component}${section.id}`}
/>
))}
</>
);
};
export default Sections;