How to fix Binding element implicitly has an 'any' type.

Answered

Yellowstripe scad posted this in #help-forum

Yellowstripe scadOP

2023-12-21T03:23:17.000Z

page.tsx -

import Head from 'next/head';
import { useRouter } from 'next/router';
import switchesData from "@/public/keyboardSwitches.json"
import Image from 'next/image'
import SwitchCard from '@/components/SwitchCard';

export default async function Home() {
    console.log(switchesData)
    return (
        <div className="px-0 py-4 xl:py-10 lg:py-7 lg:px-26 xl:px-40 w-full h-full">
            <div className="w-100 rounded-lg h-20 bg-gray-100 p-3 flex flex-row items-center justify-center">
                search/filters box
            </div>
            <div className="rounded-lg py-3 grid grid-cols-2 gap-2 lg:grid-cols-4">
                {switchesData.map((switchItem) => (
                    <SwitchCard key={switchItem.id} data={switchItem} />
                ))}
            </div>
        </div>
    )
}

SwitchCard.tsx -

"use client"
import Image from "next/image";
import { Button } from "./ui/button";
import Link from "next/link";
import switchData from "@/public/keyboardSwitches.json"
import EmblaCarousel from "./embla/EmblaCarousel";

export default function SwitchCard({ data }) {
    console.log(data)
    return <p>hello</p>
}

data parameter is giving the error in SwitchCard.tsx
in this case, data is an object, json.

Answered by Ray

I'm not sure what is inside switchData but you can try something like this

import switchesData from "@/public/keyboardSwitches.json"

export default function SwitchCard({ data }:{ data: typeof switchesData[0] }) {
    console.log(data)
    return <p>hello</p>
}

View full answer

5 Replies

@Yellowstripe scad page.tsx - js import Head from 'next/head'; import { useRouter } from 'next/router'; import switchesData from "@/public/keyboardSwitches.json" import Image from 'next/image' import SwitchCard from '@/components/SwitchCard'; export default async function Home() { console.log(switchesData) return ( <div className="px-0 py-4 xl:py-10 lg:py-7 lg:px-26 xl:px-40 w-full h-full"> <div className="w-100 rounded-lg h-20 bg-gray-100 p-3 flex flex-row items-center justify-center"> search/filters box </div> <div className="rounded-lg py-3 grid grid-cols-2 gap-2 lg:grid-cols-4"> {switchesData.map((switchItem) => ( <SwitchCard key={switchItem.id} data={switchItem} /> ))} </div> </div> ) } SwitchCard.tsx - js "use client" import Image from "next/image"; import { Button } from "./ui/button"; import Link from "next/link"; import switchData from "@/public/keyboardSwitches.json" import EmblaCarousel from "./embla/EmblaCarousel"; export default function SwitchCard({ data }) { console.log(data) return <p>hello</p> } data parameter is giving the error in SwitchCard.tsx in this case, data is an object, json.

Ray

2023-12-21T03:25:04.000Z

create the typescript type for it

@Ray create the typescript type for it

Yellowstripe scadOP

2023-12-21T03:25:54.000Z

im new to nextjs and typescript, how would I do that. is there somewhere that lists all types

Ray

2023-12-21T03:33:59.000Z

I'm not sure what is inside switchData but you can try something like this

import switchesData from "@/public/keyboardSwitches.json"

export default function SwitchCard({ data }:{ data: typeof switchesData[0] }) {
    console.log(data)
    return <p>hello</p>
}

Answer

@Ray I'm not sure what is inside switchData but you can try something like this ts import switchesData from "@/public/keyboardSwitches.json" export default function SwitchCard({ data }:{ data: typeof switchesData[0] }) { console.log(data) return <p>hello</p> }

Yellowstripe scadOP

2023-12-21T03:40:50.000Z

this works! thank you

@Yellowstripe scad this works! thank you

Ray

2023-12-21T03:48:50.000Z

cool, please mark solution