I am new using tailwind ui components
so how to use this and route it.. in other words, how when clicking on left panel link option it changes the right panel by using reactjs.
I would like to see a project example using the tailwind ui code below.
see the tailwind UI sidebar.
Thank in advance for any help on it.
import { Fragment, useState } from 'react'
import { Dialog, Menu, Transition } from '#headlessui/react'
import {
BellIcon,
CalendarIcon,
ChartBarIcon,
FolderIcon,
HomeIcon,
InboxIcon,
MenuAlt2Icon,
UsersIcon,
XIcon,
} from '#heroicons/react/outline'
import { SearchIcon } from '#heroicons/react/solid'
const navigation = [
{ name: 'Dashboard', href: '#', icon: HomeIcon, current: true },
{ name: 'Team', href: '#', icon: UsersIcon, current: false },
{ name: 'Projects', href: '#', icon: FolderIcon, current: false },
{ name: 'Calendar', href: '#', icon: CalendarIcon, current: false },
{ name: 'Documents', href: '#', icon: InboxIcon, current: false },
{ name: 'Reports', href: '#', icon: ChartBarIcon, current: false },
]
const userNavigation = [
{ name: 'Your Profile', href: '#' },
{ name: 'Settings', href: '#' },
{ name: 'Sign out', href: '#' },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
const [sidebarOpen, setSidebarOpen] = useState(false)
return (
<>
{/*
This example requires updating your template:
```
<html class="h-full bg-gray-100">
<body class="h-full">
```
*/}
<div>
<Transition.Root show={sidebarOpen} as={Fragment}>
<Dialog as="div" className="relative z-40 md:hidden" onClose={setSidebarOpen}>
<Transition.Child
as={Fragment}
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" />
</Transition.Child>
<div className="fixed inset-0 flex z-40">
<Transition.Child
as={Fragment}
enter="transition ease-in-out duration-300 transform"
enterFrom="-translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<Dialog.Panel className="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="absolute top-0 right-0 -mr-12 pt-2">
<button
type="button"
className="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
onClick={() => setSidebarOpen(false)}
>
<span className="sr-only">Close sidebar</span>
<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
</button>
</div>
</Transition.Child>
<div className="flex-shrink-0 flex items-center px-4">
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
alt="Workflow"
/>
</div>
<div className="mt-5 flex-1 h-0 overflow-y-auto">
<nav className="px-2 space-y-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current
? 'bg-gray-900 text-white'
: 'text-gray-300 hover:bg-gray-700 hover:text-white',
'group flex items-center px-2 py-2 text-base font-medium rounded-md'
)}
>
<item.icon
className={classNames(
item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300',
'mr-4 flex-shrink-0 h-6 w-6'
)}
aria-hidden="true"
/>
{item.name}
</a>
))}
</nav>
</div>
</Dialog.Panel>
</Transition.Child>
<div className="flex-shrink-0 w-14" aria-hidden="true">
{/* Dummy element to force sidebar to shrink to fit close icon */}
</div>
</div>
</Dialog>
</Transition.Root>
{/* Static sidebar for desktop */}
<div className="hidden md:flex md:w-64 md:flex-col md:fixed md:inset-y-0">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex-1 flex flex-col min-h-0 bg-gray-800">
<div className="flex items-center h-16 flex-shrink-0 px-4 bg-gray-900">
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg"
alt="Workflow"
/>
</div>
<div className="flex-1 flex flex-col overflow-y-auto">
<nav className="flex-1 px-2 py-4 space-y-1">
{navigation.map((item) => (
<a
key={item.name}
href={item.href}
className={classNames(
item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'group flex items-center px-2 py-2 text-sm font-medium rounded-md'
)}
>
<item.icon
className={classNames(
item.current ? 'text-gray-300' : 'text-gray-400 group-hover:text-gray-300',
'mr-3 flex-shrink-0 h-6 w-6'
)}
aria-hidden="true"
/>
{item.name}
</a>
))}
</nav>
</div>
</div>
</div>
<div className="md:pl-64 flex flex-col">
<div className="sticky top-0 z-10 flex-shrink-0 flex h-16 bg-white shadow">
<button
type="button"
className="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500 md:hidden"
onClick={() => setSidebarOpen(true)}
>
<span className="sr-only">Open sidebar</span>
<MenuAlt2Icon className="h-6 w-6" aria-hidden="true" />
</button>
<div className="flex-1 px-4 flex justify-between">
<div className="flex-1 flex">
<form className="w-full flex md:ml-0" action="#" method="GET">
<label htmlFor="search-field" className="sr-only">
Search
</label>
<div className="relative w-full text-gray-400 focus-within:text-gray-600">
<div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
<SearchIcon className="h-5 w-5" aria-hidden="true" />
</div>
<input
id="search-field"
className="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-0 focus:border-transparent sm:text-sm"
placeholder="Search"
type="search"
name="search"
/>
</div>
</form>
</div>
<div className="ml-4 flex items-center md:ml-6">
<button
type="button"
className="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Profile dropdown */}
<Menu as="div" className="ml-3 relative">
<div>
<Menu.Button className="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span className="sr-only">Open user menu</span>
<img
className="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a
href={item.href}
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}
>
{item.name}
</a>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
</div>
<main className="flex-1">
<div className="py-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 className="text-2xl font-semibold text-gray-900">Dashboard</h1>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
{/* Replace with your content */}
<div className="py-4">
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96" />
</div>
{/* /End replace */}
</div>
</div>
</main>
</div>
</div>
</>
)
}
Related
The code below comes from https://headlessui.com/react/popover.
As you can see, it uses a function to render Popover.Button.
In enzyme, no matter use shallow or mount, the result tree without elements wrapped by React.Fragment.
So I want to ask is there a way to render the whole dom in enzyme or #testing-library/react
export default function Example() {
return (
<div className="fixed top-16 w-full max-w-sm px-4">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={`
${open ? '' : 'text-opacity-90'}
group inline-flex items-center rounded-md bg-orange-700 px-3 py-2 text-base font-medium text-white hover:text-opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75`}
>
<span>Solutions</span>
<ChevronDownIcon
className={`${open ? '' : 'text-opacity-70'}
ml-2 h-5 w-5 text-orange-300 transition duration-150 ease-in-out group-hover:text-opacity-80`}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-sm -translate-x-1/2 transform px-4 sm:px-0 lg:max-w-3xl">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-8 bg-white p-7 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 flex items-center rounded-lg p-2 transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<div className="flex h-10 w-10 shrink-0 items-center justify-center text-white sm:h-12 sm:w-12">
<item.icon aria-hidden="true" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-900">
{item.name}
</p>
<p className="text-sm text-gray-500">
{item.description}
</p>
</div>
</a>
))}
</div>
<div className="bg-gray-50 p-4">
<a
href="##"
className="flow-root rounded-md px-2 py-2 transition duration-150 ease-in-out hover:bg-gray-100 focus:outline-none focus-visible:ring focus-visible:ring-orange-500 focus-visible:ring-opacity-50"
>
<span className="flex items-center">
<span className="text-sm font-medium text-gray-900">
Documentation
</span>
</span>
<span className="block text-sm text-gray-500">
Start integrating products and tools
</span>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
)
}
I use the component:
Centered with bottom border
and i built it in react app:
/* This example requires Tailwind CSS v2.0+ */
import { Fragment } from 'react'
import { Popover, Transition } from '#headlessui/react'
import {
BookmarkAltIcon,
CalendarIcon,
ChartBarIcon,
CursorClickIcon,
MenuIcon,
PhoneIcon,
PlayIcon,
RefreshIcon,
ShieldCheckIcon,
SupportIcon,
ViewGridIcon,
XIcon,
} from '#heroicons/react/outline'
import { ChevronDownIcon } from '#heroicons/react/solid'
function hello() {
alert("hiho");
}
const solutions = [
{
name: 'Analytics',
description: 'Get a better understanding of where your traffic is coming from.',
href: '#',
icon: ChartBarIcon,
},
{
name: 'Engagement',
description: 'Speak directly to your customers in a more meaningful way.',
href: '#',
icon: CursorClickIcon,
},
{ name: 'Security', description: "Your customers' data will be safe and secure.", href: '#', icon: ShieldCheckIcon },
{
name: 'Integrations',
description: "Connect with third-party tools that you're already using.",
href: '#',
icon: ViewGridIcon,
},
{
name: 'Automations',
description: 'Build strategic funnels that will drive your customers to convert',
href: '#',
icon: RefreshIcon,
},
]
const callsToAction = [
{ name: 'Watch Demo', href: '#', icon: PlayIcon },
{ name: 'Contact Sales', href: '#', icon: PhoneIcon },
]
const resources = [
{
name: 'Help Center',
description: 'Get all of your questions answered in our forums or contact support.',
href: '#',
icon: SupportIcon,
},
{
name: 'Guides',
description: 'Learn how to maximize our platform to get the most out of it.',
href: '#',
icon: BookmarkAltIcon,
},
{
name: 'Events',
description: 'See what meet-ups and other events we might be planning near you.',
href: '#',
icon: CalendarIcon,
},
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#', icon: ShieldCheckIcon },
]
const recentPosts = [
{ id: 1, name: 'Boost your conversion rate', href: '#' },
{ id: 2, name: 'How to use search engine optimization to drive traffic to your site', href: '#' },
{ id: 3, name: 'Improve your customer experience', href: '#' },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Example() {
return (
<Popover className="relative bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6">
<div className="flex justify-between items-center border-b-2 border-gray-100 py-6 md:justify-start md:space-x-10">
<div className="flex justify-start lg:w-0 lg:flex-1">
<a href="#">
<span className="sr-only">Workflow</span>
<img
className="h-8 w-auto sm:h-10"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt=""
/>
</a>
</div>
<div className="-mr-2 -my-2 md:hidden">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<Popover.Group as="nav" className="hidden md:flex space-x-10">
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
)}
>
<span>Solutions</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-10 -ml-4 mt-3 transform px-2 w-screen max-w-md sm:px-0 lg:ml-0 lg:left-1/2 lg:-translate-x-1/2">
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-indigo-600" aria-hidden="true" />
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="px-5 py-5 bg-gray-50 space-y-6 sm:flex sm:space-y-0 sm:space-x-10 sm:px-8">
{callsToAction.map((item) => (
<div key={item.name} className="flow-root">
<a
href={item.href}
className="-m-3 p-3 flex items-center rounded-md text-base font-medium text-gray-900 hover:bg-gray-100"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-gray-400" aria-hidden="true" />
<span className="ml-3">{item.name}</span>
</a>
</div>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Pricing
</a>
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
Docs
</a>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-gray-900' : 'text-gray-500',
'group bg-white rounded-md inline-flex items-center text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
)}
>
<span>More</span>
<ChevronDownIcon
className={classNames(
open ? 'text-gray-600' : 'text-gray-400',
'ml-2 h-5 w-5 group-hover:text-gray-500'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-10 left-1/2 transform -translate-x-1/2 mt-3 px-2 w-screen max-w-md sm:px-0">
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow-hidden">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-start rounded-lg hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-indigo-600" aria-hidden="true" />
<div className="ml-4">
<p className="text-base font-medium text-gray-900">{item.name}</p>
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
</div>
</a>
))}
</div>
<div className="px-5 py-5 bg-gray-50 sm:px-8 sm:py-8">
<div>
<h3 className="text-sm tracking-wide font-medium text-gray-500 uppercase">Recent Posts</h3>
<ul role="list" className="mt-4 space-y-4">
{recentPosts.map((post) => (
<li key={post.id} className="text-base truncate">
<a href={post.href} className="font-medium text-gray-900 hover:text-gray-700">
{post.name}
</a>
</li>
))}
</ul>
</div>
<div className="mt-5 text-sm">
<a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
{' '}
View all posts <span aria-hidden="true">→</span>
</a>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</Popover.Group>
<div className="hidden md:flex items-center justify-end md:flex-1 lg:w-0">
<a href="#" className="whitespace-nowrap text-base font-medium text-gray-500 hover:text-gray-900">
Sign in
</a>
<a
href="#"
className="ml-8 whitespace-nowrap inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
>
Sign up
</a>
</div>
</div>
</div>
<Transition
as={Fragment}
enter="duration-200 ease-out"
enterFrom="opacity-0 scale-95"
enterTo="opacity-100 scale-100"
leave="duration-100 ease-in"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95"
>
<Popover.Panel focus className="absolute top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden">
<div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white divide-y-2 divide-gray-50">
<div className="pt-5 pb-6 px-5">
<div className="flex items-center justify-between">
<div>
<img
className="h-8 w-auto"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
alt="Workflow"
/>
</div>
<div className="-mr-2">
<Popover.Button className="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Close menu</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
</div>
<div className="mt-6">
<nav className="grid gap-y-8">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 p-3 flex items-center rounded-md hover:bg-gray-50"
>
<item.icon className="flex-shrink-0 h-6 w-6 text-indigo-600" aria-hidden="true" />
<span className="ml-3 text-base font-medium text-gray-900">{item.name}</span>
</a>
))}
</nav>
</div>
</div>
<div className="py-6 px-5 space-y-6">
<div className="grid grid-cols-2 gap-y-4 gap-x-8">
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
Pricing
</a>
<a href="#" className="text-base font-medium text-gray-900 hover:text-gray-700">
Docs
</a>
{resources.map((item) => (
<a
key={item.name}
href={item.href}
className="text-base font-medium text-gray-900 hover:text-gray-700"
>
{item.name}
</a>
))}
</div>
<div>
<a
href="#"
className="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700"
>
Sign up
</a>
<p className="mt-6 text-center text-base font-medium text-gray-500">
Existing customer?{' '}
<a href="#" className="text-indigo-600 hover:text-indigo-500">
Sign in
</a>
</p>
</div>
</div>
</div>
</Popover.Panel>
</Transition>
</Popover>
)
}
But when i press on the "Solutions" button it is just flashing for a second. Why is it?
I just investigated a similar issue (which only happens in mobile or mobile mode in dev tools). after removing styles from my tailwindcss.css file I finally arrived at
button,
[role="button"] {
cursor: pointer;
}
removing this solved this blink for me
I've been starring at my code, but I can't see where the key is missing. That is my error:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of Card. It was passed a child from ContractInfo.
Here is Card:
export const Card = ({ selected, onChange, title, price, frequency, description, feature, cta }) => {
const mode = selected ? 'border-yellow-500 border-4' : 'border-gray-200'
return (
<div
className={["relative p-8 bg-white border-gray-200 rounded-2xl shadow-sm flex flex-col border-2", mode].join(' ')}
style={{cursor:'pointer'}}
selected={selected}
onClick={onChange}
>
<div className="flex-1 ">
<h3 className="text-xl font-semibold text-gray-900">{title}</h3>
<p className="mt-4 flex items-baseline text-gray-900">
<span className="text-5xl font-extrabold tracking-tight">€{price}</span>
<span className="ml-1 text-xl font-semibold">{frequency}</span>
</p>
<p className="mt-6 text-gray-500">{description}</p>
{/* Feature list */}
{feature}
</div>
<div className= 'bg-yellow-500 text-white hover:bg-yellow-600 mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium'>
{cta}
</div>
</div>
);
}
And here is the bit in ContractInfo:
return (
<div className={formStep === 0 ? 'block' : 'hidden'}>
<div className="bg-white py-16 px-4 overflow-hidden sm:px-6 lg:px-8">
<div className="relative max-w-xl mx-auto">
<div className="text-center">
<h2 className="text-3xl font-extrabold tracking-tight text-gray-600 sm:text-4xl">Welcher Vertrag passt zu dir?</h2>
</div>
</div>
<div className="max-w-7xl mx-auto py-4 px-4 bg-white sm:px-6 lg:px-8">
<div className="mt space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8">
{contracts.map((contract, index) => (
<Card
key={contract.id}
title={contract.title}
price={contract.price}
frequency={contract.frequency}
description={contract.description}
feature={ contract.features.map((feature, index) =>
<ul role="list" className="mt-6 space-y-6">
<li className="flex" key={feature.id} >
{console.log(feature.id)}
<CheckIcon className="flex-shrink-0 w-6 h-6 text-yellow-500" aria-hidden="true" />
{feature.name}
</li>
</ul> )}
cta={contract.cta}
selected={isSelected === index}
onChange={() => setisSelected(index)}
/>
))}
{/* {console.log(contracts?.[isSelected])} */}
</div>
</div>
<div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-center">
<div className="rounded-md shadow">
<a role="button" tabIndex={0}
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-200 hover:bg-gray-200 focus:outline-none md:py-4 md:text-lg md:px-10 cursor-not-allowed"
>
Zurück
</a>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<a
//onClick={nextQuizStep}
onClick={() => nextFormStep(contracts?.[isSelected]) }
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
>
Weiter
</a>
</div>
</div>
</div>
</div>
);
}
Keys are both present for features list and for cards. Where is the problem?
Key Error is caused by feature rendering in Card component
This is cause the keys are not present among sibling elements of the for loop in feature creation, so to correct this You set key for parent ul in
feature={ contract.features.map((feature, index) =>
<ul role="list" className="mt-6 space-y-6">
<li className="flex" key={feature.id} >
{console.log(feature.id)}
<CheckIcon className="flex-shrink-0 w-6 h-6 text-yellow-500" aria-hidden="true" />
{feature.name}
</li>
</ul> )}
so it becomes
feature={ contract.features.map((feature, index) =>
<ul role="list" className="mt-6 space-y-6" key={'feature-'+feature.id}>
<li className="flex" >
{console.log(feature.id)}
<CheckIcon className="flex-shrink-0 w-6 h-6 text-yellow-500" aria-hidden="true" />
{feature.name}
</li>
</ul> )}
I'm mapping through an array but I only want to select a specific item so I can make an onlick in it and for it to perform an specific action but I don't know how to only select that item instead of all the items in the array.
I want to only select the "Sign out" from the profile's variable. Any help I would greatly appreciate it.
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '#headlessui/react'
import { BellIcon, MenuIcon, XIcon } from '#heroicons/react/outline'
const navigation = ['Dashboard', 'Clients', 'Meals', 'Calendar']
const profile = ['Your Profile', 'Settings', 'Sign out']
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Main() {
return (
<div>
<Disclosure as="nav" className="bg-gray-800">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<img
className="h-8 w-8"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
alt="Workflow"
/>
</div>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{navigation.map((item, itemIdx) =>
itemIdx === 0 ? (
<Fragment key={item}>
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
<a href="/dashboard" className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">
{item}
</a>
</Fragment>
) : (
<a
key={item}
href={`/${item}`}
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
{item}
</a>
)
)}
</div>
</div>
</div>
<div className="hidden md:block">
<div className="ml-4 flex items-center md:ml-6">
<button
type="button"
className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Profile dropdown */}
<Menu as="div" className="ml-3 relative">
<div>
<Menu.Button className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span className="sr-only">Open user menu</span>
<img
className="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{profile.map((item) => (
<Menu.Item key={item}>
{({ active }) => (
<a
href="#"
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}
>
{item}
</a>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
<div className="-mr-2 flex md:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span className="sr-only">Open main menu</span>
{open ? (
<XIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
</div>
</div>
<Disclosure.Panel className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
{navigation.map((item, itemIdx) =>
itemIdx === 0 ? (
<Fragment key={item}>
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
<a href="#" className="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">
{item}
</a>
</Fragment>
) : (
<a
key={item}
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
{item}
</a>
)
)}
</div>
<div className="pt-4 pb-3 border-t border-gray-700">
<div className="flex items-center px-5">
<div className="flex-shrink-0">
<img
className="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<div className="text-base font-medium leading-none text-white">Tom Cook</div>
<div className="text-sm font-medium leading-none text-gray-400">tom#example.com</div>
</div>
<button
type="button"
className="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-3 px-2 space-y-1">
{profile.map((item) => (
<a
key={item}
href="#"
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
>
{item}
</a>
))}
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
</div>
)
}
I assume that you want to apply onclick to the Menu.Items
So just check for the item==='Sign out' then put your handler there.
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{profile.map((item) => (
<Menu.Item key={item} onClick={item === "Sign out" && handleSomething()}>
{({ active }) => (
<a
href="#"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
{item}
</a>
)}
</Menu.Item>
))}
</Menu.Items>;
I have a problem where I use getInitialProps to fetch data but I show on the web it doesn't appear but if my data is try console.log the data will appear accordingly
{this.props.siswa.map(siswa => {
{console.log(siswa)}
<div className="flex">
<div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
<img className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src={`/img/siswa/${siswa.id}.jpg`} loading="lazy" />
<div className="text-center space-y-2 sm:text-left">
<div className="space-y-0.5">
<p className="text-lg text-black font-semibold dark:text-gray-200">
{siswa.panggilan}
</p>
<p className="text-gray-500 font-medium dark:text-gray-300">
{siswa.nama}
</p>
</div>
<button id="om" className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4" onClick={() => this.setState({showModalSiswa: true})}>Detail</button>
</div>
</div>
</div>
})}
this is the data that comes up if I do console.log
{
id: '1',
nama: 'Ipsun',
panggilan: 'ipsun',
ttl: 'ipsun',
alamat: 'ipsun',
nope: '43143',
ig: '#ipsun',
line: null,
telegram: null,
tiktok: null,
fb: null,
linkedin: null,
pesan: 'ipsun'
}
{
id: '2',
nama: 'lorem',
panggilan: 'lorem',
ttl: 'lorem',
alamat: 'lorem',
nope: '41413',
ig: '#lorem',
line: null,
telegram: null,
tiktok: null,
fb: null,
linkedin: null,
pesan: 'lorem'
}
It's because you're not returning any jsx from your .map ;)
{this.props.siswa.map(siswa => {
{console.log(siswa)}
return (
<div className="flex">
<div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
<img className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src={`/img/siswa/${siswa.id}.jpg`} loading="lazy" />
<div className="text-center space-y-2 sm:text-left">
<div className="space-y-0.5">
<p className="text-lg text-black font-semibold dark:text-gray-200">
{siswa.panggilan}
</p>
<p className="text-gray-500 font-medium dark:text-gray-300">
{siswa.nama}
</p>
</div>
<button id="om" className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4" onClick={() => this.setState({showModalSiswa: true})}>Detail</button>
</div>
</div>
</div>
)
})}
Or you can return like this:
{this.props.siswa.map(siswa =>
<div className="flex">
<div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
<img className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0" src={`/img/siswa/${siswa.id}.jpg`} loading="lazy" />
<div className="text-center space-y-2 sm:text-left">
<div className="space-y-0.5">
<p className="text-lg text-black font-semibold dark:text-gray-200">
{siswa.panggilan}
</p>
<p className="text-gray-500 font-medium dark:text-gray-300">
{siswa.nama}
</p>
</div>
<button id="om" className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4" onClick={() => this.setState({showModalSiswa: true})}>Detail</button>
</div>
</div>
</div>
}
Alternatively, you can omit the return keyword by using an implicit return:
const ComponentTest = ({ siswa }) =>
siswa.map((siswa) => (
<div className="flex">
{console.log(siswa)}
<div className="py-8 px-8 w-full lg:max-w-sm bg-white rounded-xl shadow-md hover:shadow-xl space-y-2 sm:py-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-6 dark:bg-indigo-600 ml-0 lg:ml-3 sm:mt-2 md:w-full">
<img
className="block mx-auto object-cover w-24 h-24 rounded-full sm:mx-0 sm:flex-shrink-0"
src={`/img/siswa/${siswa.id}.jpg`}
loading="lazy"
/>
<div className="text-center space-y-2 sm:text-left">
<div className="space-y-0.5">
<p className="text-lg text-black font-semibold dark:text-gray-200">
{siswa.panggilan}
</p>
<p className="text-gray-500 font-medium dark:text-gray-300">
{siswa.nama}
</p>
</div>
<button
id="om"
className="px-4 py-1 text-sm text-indigo-600 font-semibold rounded-full border border-indigo-400 hover:text-white hover:bg-indigo-600 hover:border-transparent focus:outline-none focus:ring-1 focus:ring-indigo-600 focus:ring-offset-2 dark:text-gray-200 dark:border-white dark:hover:text-gray-200 dark:hover:border-indigo-800 dark:hover:bg-indigo-800 dark:focus:ring-indigo-800 w-full md:w-2/4"
onClick={() => this.setState({ showModalSiswa: true })}
>
Detail
</button>
</div>
</div>
</div>
));
Note the console.log is within JSX, this is fine since it is wrapped with curly brackets and gets evaluated.