import React from "react"; import Image from "next/image"; import { useState } from "react"; export default function Characters({ info }) { const [showAll, setShowAll] = useState(false); return (

Characters

{info?.length > 6 && (
setShowAll(!showAll)} > {showAll ? "show less" : "show more"}
)}
{/* for bigger device */}
{info.slice(0, showAll ? info.length : 6).map((item, index) => { return (
{

{item.node.name.full || item.node.name.userPreferred}

{item.role}

); })}
{/* for smaller devices */}
{info.slice(0, showAll ? info.length : 6).map((item, index) => { return (
{

{item.node.name.full || item.node.name.userPreferred}

~{item.role}

); })}
); }