SolidJS•4mo ago•

1 reply

Am I misusing mergeProps here?

💙Beginner

SolidStart

I'm trying to get used to some of the features of SolidJS/SolidStart on this initial project and am running into an issue with

mergeProps()

mergeProps()

.

I've got this component that I'm building to serve as a very generic UI component:

import { JSXElement, mergeProps } from 'solid-js'

interface ComponentProps {
  children: JSXElement | JSXElement[]
  headerText: string
  class?: string
}

export default function Card(props: ComponentProps) {
  const defaults: { class: string } = { class: 'bg-base-200 p-4' }
  console.log(defaults, props)
  const merged = mergeProps(props, defaults)
  console.log(merged)

  return (
    <div>
      <div class="border-b border-neutral-700 text-3xl text-center card-header mb-4 pb-2">{props.headerText}</div>
      {props.children}
    </div>
  )
}

import { JSXElement, mergeProps } from 'solid-js'

interface ComponentProps {
  children: JSXElement | JSXElement[]
  headerText: string
  class?: string
}

export default function Card(props: ComponentProps) {
  const defaults: { class: string } = { class: 'bg-base-200 p-4' }
  console.log(defaults, props)
  const merged = mergeProps(props, defaults)
  console.log(merged)

  return (
    <div>
      <div class="border-b border-neutral-700 text-3xl text-center card-header mb-4 pb-2">{props.headerText}</div>
      {props.children}
    </div>
  )
}

Then I am importing and using the above component in a test page/route like so:

import Card from '~/components/Card'

export default function Login() {
  return (
    <Card headerText="Test" class="w-3xl">
      Test2
    </Card>
  )
}

import Card from '~/components/Card'

export default function Login() {
  return (
    <Card headerText="Test" class="w-3xl">
      Test2
    </Card>
  )
}

The problem is, when I try to merge the value of the

class

class

prop with the defaults defined in the component, it doesn't work.

Am I doing something wrong here? Is the issue that the defaults have to also have default values for the other two attributes in order for a proper merge? (

headerText

headerText

and

children

children

)?

The documentation that I read on the official site did show the basic syntax, but I feel like maybe this isn't the correct use case for this feature or I'm doing something wrong with it.

The idea is that I'm wanting to be able to pass a class name to the component and add it to the existing default ones. Maybe there's a better solution or one that's more correct that doesn't even use

mergeProps()

mergeProps()

to begin with?

Thanks in advance!

SolidJS•4mo ago•

1 reply

Zach (MisutoRaccoon)

Am I misusing mergeProps here?

💙Beginner

SolidStart

I'm trying to get used to some of the features of SolidJS/SolidStart on this initial project and am running into an issue with

mergeProps()

mergeProps()

.

I've got this component that I'm building to serve as a very generic UI component:

import { JSXElement, mergeProps } from 'solid-js'

interface ComponentProps {
  children: JSXElement | JSXElement[]
  headerText: string
  class?: string
}

export default function Card(props: ComponentProps) {
  const defaults: { class: string } = { class: 'bg-base-200 p-4' }
  console.log(defaults, props)
  const merged = mergeProps(props, defaults)
  console.log(merged)

  return (
    <div>
      <div class="border-b border-neutral-700 text-3xl text-center card-header mb-4 pb-2">{props.headerText}</div>
      {props.children}
    </div>
  )
}

import { JSXElement, mergeProps } from 'solid-js'

interface ComponentProps {
  children: JSXElement | JSXElement[]
  headerText: string
  class?: string
}

export default function Card(props: ComponentProps) {
  const defaults: { class: string } = { class: 'bg-base-200 p-4' }
  console.log(defaults, props)
  const merged = mergeProps(props, defaults)
  console.log(merged)

  return (
    <div>
      <div class="border-b border-neutral-700 text-3xl text-center card-header mb-4 pb-2">{props.headerText}</div>
      {props.children}
    </div>
  )
}

Then I am importing and using the above component in a test page/route like so:

import Card from '~/components/Card'

export default function Login() {
  return (
    <Card headerText="Test" class="w-3xl">
      Test2
    </Card>
  )
}

import Card from '~/components/Card'

export default function Login() {
  return (
    <Card headerText="Test" class="w-3xl">
      Test2
    </Card>
  )
}

The problem is, when I try to merge the value of the

class

class

headerText

headerText

and

children

children

mergeProps()

mergeProps()

to begin with?

Thanks in advance!

Am I misusing mergeProps here?

Am I misusing mergeProps here?

Similar Threads

Similar Threads

Similar Threads