I’m new to JSX, I’m building a Nextjs app, and I’m having this irritating error:
“failed to process internal error: entered unreachable code: assign property in object literal is invalid”
This is my index.js
import CardsContainer from "../components/layout/CardsContainer";
import SideNav from "../components/layout/side-nav/SideNav";
import TopNav from "../Components/layout/top-nav/TopNav";
const cards = [
{id = 1, city = "Riyadh", gender = "Male", image = "1"},
{id = 2, city = "Riyadh", gender = "Male", image = "1"},
{id = 3, city = "Riyadh", gender = "Male", image = "1"},
{id = 4, city = "Riyadh", gender = "Male", image = "1"},
{id = 5, city = "Riyadh", gender = "Male", image = "1"},
{id = 6, city = "Riyadh", gender = "Male", image = "1"}
];
export default function Home() {
return (
<Fragment>
<TopNav />
<SideNav/>
<CardsContainer cards={cards}/>
</Fragment>
);
}
This is my CardsContainer.js
export default function CardsContainer(props) {
//const cards = props.cards;
const cards = props.cards;
return (
<div class="w-9/12 bg-gray-400">
{cards.map((card) => {
return (<CatCard cat={card} />);
})}
</div>
);
}
And this is my CarCard.js
import Image from "next/image";
import Link from "next/link";
export default function CatCard(props) {
const id = props.cat.id;
const city = props.cat.city;
const gender = props.cat.gender;
const image = props.cat.image;
return (
<Link href={`/catdetails/${id}`}>
<a>
<div
class=" p-2 pb-5 bg-white w-80 rounded-xl border-2"
id="card-with-image"
>
<div class="rounded-xl w-full h-52 overflow-hidden">
<Image
className="min-h-full object-cover object-left"
src={`/images/cats/${image}.jpg`}
alt="Tumbnail Image"
width="300"
height="200"
/>
</div>
<div class="px-2 my-4">
<h2 class="my-3 font-medium text-lg">City:</h2>
<p class="my-3 text-base text-[#425466]">
{city}
</p>
</div>
<div class="px-2 my-4">
<h2 class="my-3 font-medium text-lg">Gender:</h2>
<p class="my-3 text-base text-[#425466]">
{gender}
</p>
</div>
</div>
</a>
</Link>
);
}
What do you guys think? I have fiddled with all brackets and curly brackets (and semi-colons), nothing resolved.