import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    a: "a",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Merging props isn't the only props operation we might want to do."
    }), "\n", jsx(_components.p, {
      children: "Often, we want to split props into groups, so that we can use some of them on\nthe current component but split off others to pass through to child components."
    }), "\n", jsxs(_components.p, {
      children: ["For this purpose, Solid has ", jsx(_components.a, {
        href: "/docs/latest/api#splitprops",
        children: jsx(_components.code, {
          children: "splitProps"
        })
      }), ". It\ntakes the props object\nand\none or more arrays of keys that we want to extract into their own props objects. It returns an array of props objects, one per array of specified keys, plus one props object with any remaining keys. All returned objects preserve reactivity."]
    }), "\n", jsxs(_components.p, {
      children: ["Our example doesn't update when we set the name because of lost reactivity when we destructure in ", jsx(_components.code, {
        children: "greeting.tsx"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Greeting"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " { greeting, name, ...others } = props;\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), " {", jsx(_components.span, {
              className: "hljs-attr",
              children: "...others"
            }), "}>"]
          }), "{greeting} {name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          })]
        }), "\n}\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Instead, we can maintain reactivity with ", jsx(_components.code, {
        children: "splitProps"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "export"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "default"
        }), " ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "Greeting"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [local, others] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "splitProps"
        }), "(props, [", jsx(_components.span, {
          className: "hljs-string",
          children: "\"greeting\""
        }), ", ", jsx(_components.span, {
          className: "hljs-string",
          children: "\"name\""
        }), "]);\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), " {", jsx(_components.span, {
              className: "hljs-attr",
              children: "...others"
            }), "}>"]
          }), "{local.greeting} {local.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "h3"
            }), ">"]
          })]
        }), "\n}\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Now the button works as expected."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-e198ee0c.js.map
