CODEWITHSUNDEEP
javascriptreactjsnext.js
Happylearning
Happylearning

Reputation: 11

NextJs nesting a component into another (not FC)

I built a module, then broke it up into components and trying to put it back together.

The components work. Some components go inside the div of another component.

I have tried putting them into a div scaffold, but i was then writing more css to bring the module together.

I thought we just do this:

<CompOne>
   <CompTwo />
</CompOne>

This gives an error:

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

So maybe the above is write i need to typescript? sorry couldnt find a working example on this.

function WaldoEye() {
    return (
        <WaldoEyeball>
            <WaldoRetina/>
        </WaldoEyeball>

    )
}

export default WaldoEye

function WaldoEyeball() {
    return (
        <div className="
          flex 
          relative
          items-center 
          opacity-90 
          w-40 h-40 
          rounded-full 
          shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
          bg-gradient-to-r 
          from-slate-50 
          via-slate-100 
          to-slate-50 
        ">
            <div className="
                absolute
                flex 
                items-center 
                opacity-90 
                w-40 h-40 
                rounded-full 
                shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
            ">
            </div>
        </div>
    )
}

export default WaldoEyeball

function WaldoRetina() {
    return (
        <>
            <div className="
                flex 
                items-center 
                relative
                mx-auto 
                w-16 
                h-16 
                rounded-full 
                border-2 
                border-sky-500 
                bg-gradient-radial
                from-cyan-500 
                via-sky-300 
                to-sky-500
            ">
            </div>
        </>
    )
}

export default WaldoRetina

Upvotes: 1

Views: 620

Answers (1)

kind user
kind user

Reputation: 41893

So maybe the above is write i need to typescript? sorry couldnt find a working example on this.

Currently the WaldoEyeball component doesn't expect any children. You will need to adjust the props in the WaldoEyeball component so it accepts children.

const WaldoEyeball: FC = ({ children }) => {
   return (
      <div className="
      flex 
      relative
      items-center 
      opacity-90 
      w-40 h-40 
      rounded-full 
      shadow-[inset_0_-15px_15px_-3px_rgba(5,10,255,0.3)]
      bg-gradient-to-r 
      from-slate-50 
      via-slate-100 
      to-slate-50 
    ">
        <div className="
            absolute
            flex 
            items-center 
            opacity-90 
            w-40 h-40 
            rounded-full 
            shadow-[0_60px_55px_-25px_rgba(255,255,255,0.4)]
        ">
          {children} // drop children somewhere to render it
        </div>
    </div>
   );
}

Upvotes: 1

Related Questions