Button react component dans un button

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Button react component dans un button

XaTriX

J'utilise NextJS v14 et PicoCSS ( https://picocss.com/ )

Dans mon header et ma nav j'ai un menu en ul li qui affiche des boutons stylisés grâce à picocss.

J'ai ajouté le support jour/nuit avec Toggle.dev https://toggles.dev/ et un ThemeToggle.js :

Code :

import React, { useState, useEffect } from 'react';
import { Expand } from "@theme-toggles/react";
import "@theme-toggles/react/css/Expand.css";
const ThemeToggle = () => {
const [isMounted, setIsMounted] = useState(false);
const [isDark, setIsDark] = useState(false);
useEffect(() => {
setIsMounted(true);
const theme = localStorage.getItem('theme') || 'light';
setIsDark(theme === 'dark');
document.documentElement.setAttribute('data-theme', theme);
}, []);
const toggleTheme = () => {
const newTheme = isDark ? 'light' : 'dark';
setIsDark(!isDark);
localStorage.setItem('theme', newTheme);
document.documentElement.setAttribute('data-theme', newTheme);
};
if (!isMounted) {
return null;
}
return (
<Expand
duration={750}
toggled={isDark}
toggle={toggleTheme}
style={{ padding: 0, margin: 0 }}
/>
);
};
export default ThemeToggle;

Et pour mon buton de menu:

Code :

<li>
<button className="secondary" data-tooltip="Jour, nuit ?" data-placement="bottom">
<ThemeToggle />
</button>
</li>

ça marche plutôt pas trop mal, j'ai eu des mouises de style avec les bouttons qui partent en couilles et je comprend maintenant :

Expand semble utiliser button quelque part, puis je met button expand dans un button.

Dans la console nav j'ai

hydration-error-info.js:63 Warning: validateDOMNesting(...): <button> cannot appear as a descendant of <button>.

Suivi de tout le chemin pour remonter.

Donc soit je demande à un LLM de me génerer le code en reprenant la partie HTML et import CSS de toggle.dev soit je trouve comment remonter le style button "secondary" à Expand.

Une ou plusieurs solutions ?

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

Publicité

XaTriX

Hfr n'est plus vivant ?

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

mechkurt

https://www.youtube.com/watch?v=Meb7uaNlcS0

Spoiler :

Désolé mais je n'ai touché 1 semaine à react y'a plusieurs années...

---------------
D3

XaTriX

T'inquiète pas, y'a quelques semaines j'y avais jamais touché

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

XaTriX

Bon en fait c'était simple, j'ai viré le button final puisque c'était lui qui embriquait le bouzin et générait l'avertissement.
A partir de la un div en role button (voir picocss) et finalement je passe les attributs que je veux à Expand qui se comporte comme un button.

Easy [:auldpuck:9]

---------------
"Xat le punk à chien facho raciste. C'est complexe comme personnage." caudacien 05/10/2020

FORUM HardWare.fr

Programmation

Javascript/Node.js

Button react component dans un button

Sujets relatifs
[React] Comment changer le state de manière unique dans une map	[Javascript - React] useRef dans map() ne fonctionne pas
Reconnaitre un button - optimisation de code	[React/JS] Actualiser image dans le front
fermer une fenetre lors du clique sur button	Facebook share button
Aide button de recherche sur un tableau	Sélection d'un noeud d'un JTree avec un button.
[Flash cs3 - AS2] Component - Layout manager - Anchor System	Java Button
Plus de sujets relatifs à : Button react component dans un button

Page générée en 0.070 secondes