I have this component where the root is a button
but when rendered in browser, it’s being rendered as a button inside a button
i am seeing double borders
if i remove the border from the root, both borders go away.
looking to just have one border
this is what it should look like
fmota
September 6, 2021, 7:25pm
2
Hi Nick, are you still having this issue ? Could you point which project is this ?
hi, i’ve eventually sidestepped the issue by embedding the button in a container and applied the border. button no longer seems to be nested anymore
chungwu
September 7, 2021, 4:05pm
4
Hi @gothic_gull can you point me to your project?
chungwu
September 7, 2021, 4:22pm
6
I can’t seem to reproduce this after moving the border style back to the root button
and removing the vertical box in the middle (so it’s just button
and then the text). Is this something you’re able to reproduce easily?
@chungwu i’m reproducing it now
check out the “hud” component
look at the root component. i set the id=“hud”
there’s now a nested div with id=“hud”
chungwu
September 10, 2021, 4:23pm
12
Thanks! Which component are you looking at (which is using this instance of hud)?
we have a beta site up and running here if it helps https://beta.otpcyberconnect2021.com/login/
chungwu
September 10, 2021, 8:05pm
15
Thanks; are you doing component substitution for Hud? If so can you share the code?
sure, in my login.js i have:
<PlasmicLoader
component="Login"
componentProps={{
hud: <Hud backEnabled={false} />,
my hud.jsx:
import React, { useEffect, useState } from "react"
import PlasmicLoader from "@plasmicapp/loader"
import { useRouter } from "next/router"
import {
useField,
useName,
usePhotoURL,
useTotalPoints
} from '../hooks/storage'
import FreshdeskWidget from '@personare/react-freshdesk-widget'
export default function Hud(props) {
const [agendaOpen, setAgendaOpen] = useState(false)
const [backEnabled, setBackEnabled] = useState(props.backEnabled)
const [profileShown, setProfileShown] = useState(props.profileEnabled)
const [field,setField] = useField()
const [name,setName] = useName()
const [photoURL,setPhotoURL] = usePhotoURL()
const [totalPoints,setTotalPoints] = useTotalPoints()
const router = useRouter()
return (
<PlasmicLoader
component="Hud"
componentProps={{
state: agendaOpen ? undefined : "hidden",
back: backEnabled ? undefined : "hidden",
profile: profileShown ? undefined : "hidden",
backButton: {
props: {
onClick: () => {
console.log("going back")
console.log(router.pathname)
// if(router.pathname === "/general") {
// router.replace("/landing")
// } else {
router.back()
// }
}
}
},
closeButton: {
props: {
onClick: (e) => {
setAgendaOpen(!agendaOpen)
},
},
},
agendaButton: {
props: {
onClick: (e) => {
setAgendaOpen(!agendaOpen);
},
},
},
name: {
wrapChildren: (children) => (
<>
<div suppressHydrationWarning>{name}</div>
</>
)
},
points: {
wrapChildren: (children) => (
<>
<div suppressHydrationWarning>{totalPoints + " points"}</div>
</>
)
},
group: {
wrapChildren: (children) => (
<>
<div suppressHydrationWarning>{field}</div>
</>
)
},
profilePhoto: {
props: {
src:photoURL ? photoURL : "<https://twcdn.s3.us-west-2.amazonaws.com/mcd2021/assets/place.jpg>"
}
},
// helpButton: {
// wrapChildren: (children) => {
// }
// }
}}
/>
);
}
chungwu
September 10, 2021, 10:36pm
19
oof. The reason is when you do:
<PlasmicLoader component="Login" componentProps={{hub: <Hub />}} />
The {hub: <Hub/>}
is actually shorthand for {hub: { props: { children: <Hub /> }}}
, which in this case I agree is pretty counterintuitive!
Instead, you should do this:
<PlasmicLoader component="Login" componentProps={{hub: () => <Hub />}} />
Passing in a render function is how you can replace that element with something else.
oh! got it! will address that. thanks!