Solid.js Props — Passing Data to Components

In this tutorial, you will learn about Solid.js Props. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Solid.js props: pass data to components, destructure props, handle default values, and use props reactively for dynamic components.

In this lesson, you'll pass props to components, understand Solid.js's prop handling, destructure with reactivity in mind, and set default values.

What You'll Learn

How to pass props, destructure without losing reactivity, set default values, spread props, and handle children.

Why It Matters

Props are the primary way to pass data between components. Solid.js props are reactive, so destructuring them incorrectly breaks reactivity.

Real-World Use

Doda Browser's tab component receives props for title, URL, favicon, and loading state, all of which update independently.

flowchart LR
    A[Parent] --> B[Props Object]
    B --> C[Component]
    C --> D[Reactive Usage]
    D --> E[DOM Updates]
    style B fill:#2c4f7c,color:#fff

Passing Props

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Alice" />
<Greeting name="Bob" />

Destructuring Props

Destructure at the parameter level to keep reactivity:

function UserCard({ name, age, email }) {
  return (
    <div>
      <h2>{name()}</h2>
      <p>Age: {age()}</p>
      <p>Email: {email}</p>
    </div>
  );
}

// Usage
<UserCard name={userName} age={userAge} email={userEmail} />

Default Props

function Button({ text = "Click me", variant = "primary", disabled = false }) {
  return (
    <button disabled={disabled} class={`btn-${variant}`}>
      {text}
    </button>
  );
}

Props Spreading

function Input(props) {
  return <input {...props} />;
}

<Input type="email" placeholder="Email" required />

Children Prop

function Card(props) {
  return (
    <div class="card">
      {props.children}
    </div>
  );
}

<Card>
  <h2>Title</h2>
  <p>Content</p>
</Card>

Common Mistakes

1. Destructuring props at function body level: Destructure in the parameter list (function Comp({ name })) to maintain reactivity.
2. Mutating props: Props are read-only. Never modify props.name. Use signals for mutable state.
3. Assuming all props are functions: Static props like text="hello" are values, not getters. Access them directly.
4. Not passing required props: Without TypeScript, missing props are silently undefined.
5. Over-spreading sensitive props: Spreading {...props} passes all props, including event handlers and unwanted attributes.

Practice Questions

1. How do you access props in a Solid.js component? Answer: Through the props argument. Destructure in the parameter list for cleaner code.

2. Why should you destructure props in the parameter list? Answer: To maintain reactivity. Props destructured at the function body level are snapshots and don't update.

3. How do you set default prop values? Answer: Use default values in the parameter destructuring: function Button({ text = "Click" }).

4. How do you render child content? Answer: Use props.children. It renders the content passed between component tags.

Challenge

Build a component library with a Button (variant, size, disabled), Input (type, placeholder, value, onChange), and Card (title, children, footer). Each component should have default props.

Mini Project

Create a reusable DataTable component that accepts columns configuration, data array, and optional props for sorting, pagination, and row click handlers.

FAQ

What's Next

Learn about Solid.js Components for creating reusable component patterns.