Double borders on a button component when rendered in browser

[gothic_gull]

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]

Hi Nick, are you still having this issue ? Could you point which project is this ?

[gothic_gull]

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]

Hi @gothic_gull can you point me to your project?

[gothic_gull]

nHUeUMKatPKwRWiSLMqPvh

[chungwu]

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?

[gothic_gull]

@chungwu i’m reproducing it now

[gothic_gull]

check out the “hud” component

[gothic_gull]

look at the root component. i set the id=“hud”

[gothic_gull]

[gothic_gull]

there’s now a nested div with id=“hud”

[chungwu]

Thanks! Which component are you looking at (which is using this instance of hud)?

[gothic_gull]

Login page

[gothic_gull]

we have a beta site up and running here if it helps https://beta.otpcyberconnect2021.com/login/

[chungwu]

Thanks; are you doing component substitution for Hud? If so can you share the code?

[gothic_gull]

sure, in my login.js i have:

[gothic_gull]

 <PlasmicLoader
          component="Login"
          componentProps={{
            hud: <Hud backEnabled={false} />,

[gothic_gull]

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]

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.

[gothic_gull]

oh! got it! will address that. thanks!