",get children(){return r(e.div,{})}})}})]}})]}}),`
`,r(e.p,{get children(){return[`It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools.
Solid sets itself apart by using JSX immediately as it returns `,r(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction",children:"DOM"}),` elements.
This lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (`,r(e.code,{children:"{ }"}),"):"]}}),`
`,r(e.div,{className:"expressive-code",get children(){return r(e.figure,{className:"frame",get children(){return[r(e.figcaption,{className:"header"}),r(e.pre,{tabIndex:"0",get children(){return r(e.code,{get children(){return[r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),r(e.span,{style:{"--1":"#BABED8"},get children(){return[r(e.span,{style:{"--0":"#24292E"},children:" "}),r(e.span,{style:{"--0":"#6F42C1"},children:"Component"}),r(e.span,{style:{"--0":"#24292E"},children:" "})]}}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"()"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),r(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"=>"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",children:" "}),r(e.span,{style:{"--0":"#C62C2C","--1":"#C792EA"},children:"const"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),r(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"animal"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" breed"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"cat"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" name"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"Midnight"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",children:`
`})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",children:" "}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF","--1fs":"italic"},children:"return"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" ("})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),r(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"p"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:">"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"I have a "}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),r(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"animal"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"breed"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" named "}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"{"}),r(e.span,{style:{"--0":"#1669BB","--1":"#BABED8"},children:"animal"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"."}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"name"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"!"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:")"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}"})}})}})]}})}}),r(e.div,{className:"copy",get children(){return r(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'const Component = () => { const animal = { breed: "cat", name: "Midnight" } return (
I have a {animal.breed} named {animal.name}!
)}',get children(){return r(e.div,{})}})}})]}})}}),`
`,r(e.p,{children:"This means JavaScript content can be rendered on web pages based on an application's state or logic."}),`
`,r(e.p,{get children(){return["Additionally, Solid's ",r(e.a,{href:"/concepts/intro-to-reactivity",children:"reactive"})," system introduces ",r(e.a,{href:"/advanced-concepts/fine-grained-reactivity",children:"fine-grained reactivity"}),` with JSX.
This updates only the necessary parts of the DOM when changes occur in the underlying state.`]}}),`
`,r(e.h2,{id:"using-jsx-in-solid",get children(){return r(e.a,{className:"heading",href:"#using-jsx-in-solid",children:"Using JSX in Solid"})}}),`
`,r(e.h3,{id:"return-a-single-root-element",get children(){return r(e.a,{className:"heading",href:"#return-a-single-root-element",children:"Return a single root element"})}}),`
`,r(e.p,{children:"Where HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element."}),`
`,r(n,{type:"advanced",get children(){return[r(e.p,{children:`When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file.
Static elements are processed differently from dynamic ones, which might change based on data or user actions.
For dynamic elements, special markers are added for better handling during rendering.`}),r(e.p,{children:"Having a single root creates a consistent and manageable hierarchy to optimize rendering and updates."})]}}),`
`,r(e.p,{children:`JSX maintains the familiar nested, tree-like structure found in HTML.
As a result, parent-child relationships between elements become easier to follow.`}),`
`,r(e.h3,{id:"close-all-tags",get children(){return r(e.a,{className:"heading",href:"#close-all-tags",children:"Close all tags"})}}),`
`,r(e.p,{get children(){return[`Self-closing tags are a must in JSX.
Unlike in HTML, where elements like `,r(e.code,{children:""}),", ",r(e.code,{children:""}),", or ",r(e.code,{children:" "}),` don't require explicit closure, JSX requires consistent self-closing tags.
This helps to avoid potential rendering issues.`]}}),`
`,r(e.div,{className:"expressive-code",get children(){return r(e.figure,{className:"frame",get children(){return[r(e.figcaption,{className:"header"}),r(e.pre,{tabIndex:"0",get children(){return r(e.code,{get children(){return r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),r(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"img"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),r(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"src"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"./image-here.png"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" />"})]}})}})}})}}),r(e.div,{className:"copy",get children(){return r(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'',get children(){return r(e.div,{})}})}})]}})}}),`
`,r(e.h3,{id:"properties-vs-attributes",get children(){return r(e.a,{className:"heading",href:"#properties-vs-attributes",children:"Properties vs. attributes"})}}),`
`,r(e.p,{children:`HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently.
Both offer ways to specify configurations or pass information.
However, HTML is used for standard web content and JSX creates Solid's component logic.`}),`
`,r(e.h4,{id:"html-attributes",get children(){return r(e.a,{className:"heading",href:"#html-attributes",children:"HTML attributes"})}}),`
`,r(e.p,{get children(){return[r(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes",children:"HTML attributes"}),` are values set directly on HTML elements.
They provide additional information about an element to guide its initial behavior and state.
These attributes are often translated into properties on DOM objects once the browser parses the HTML.`]}}),`
`,r(e.p,{children:"In JSX files, HTML attributes are used much like regular HTML, with a few key differences due to the blend of HTML and JavaScript:"}),`
`,r(e.ul,{get children(){return[`
`,r(e.li,{get children(){return["Event listeners such as ",r(e.code,{children:"onClick"}),` can be in camelCase or lowercase.
(`,r(e.strong,{children:"Note:"})," When using ESLint, you will get a warning if you use lowercase.)"]}}),`
`,r(e.li,{get children(){return["In cases where you can dynamically specify a value, you can replace the ",r(e.code,{children:'"'})," and ",r(e.code,{children:'"'})," with curly braces (",r(e.code,{children:"{ }"}),"):"]}}),`
`]}}),`
`,r(e.div,{className:"expressive-code",get children(){return r(e.figure,{className:"frame",get children(){return[r(e.figcaption,{className:"header"}),r(e.pre,{tabIndex:"0",get children(){return r(e.code,{get children(){return[r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),r(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),r(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"class"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"myClass"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),r(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),r(e.span,{style:{"--1":"#89DDFF"},get children(){return[r(e.span,{style:{"--0":"#C62C2C"},children:"="}),r(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"handleClick"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Click me!"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}})]}})}}),r(e.div,{className:"copy",get children(){return r(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'',get children(){return r(e.div,{})}})}})]}})}}),`
`,r(n,{get children(){return[r(e.p,{get children(){return["If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (",r(e.code,{children:"{{ }}"}),")."]}}),r(e.div,{className:"expressive-code",get children(){return r(e.figure,{className:"frame",get children(){return[r(e.figcaption,{className:"header"}),r(e.pre,{tabIndex:"0",get children(){return r(e.code,{get children(){return[r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),r(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),r(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"style"}),r(e.span,{style:{"--1":"#89DDFF"},get children(){return[r(e.span,{style:{"--0":"#C62C2C"},children:"="}),r(e.span,{style:{"--0":"#24292E"},children:"{{"})]}})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"color"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"red"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"font-"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"size"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"2rem"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}}>"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Click me!"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}})]}})}}),r(e.div,{className:"copy",get children(){return r(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"",get children(){return r(e.div,{})}})}})]}})}})]}}),`
`,r(e.h3,{id:"jsx-properties-props",get children(){return r(e.a,{className:"heading",href:"#jsx-properties-props",children:"JSX properties (props)"})}}),`
`,r(e.p,{children:`JSX properties, commonly known as "props," help with the passing of data and configurations to components within an application.
They connect the component with the data it requires, for seamless data flows and dynamic interactions.`}),`
`,r(e.h4,{id:"core-concepts",get children(){return r(e.a,{className:"heading",href:"#core-concepts",children:"Core concepts"})}}),`
`,r(e.ul,{get children(){return[`
`,r(e.li,{get children(){return[`
`,r(e.p,{get children(){return[r(e.strong,{children:"Static props"}),`:
In Solid's JSX, static props are integrated directly into the HTML by cloning the template and using them as attributes.`]}}),`
`]}}),`
`,r(e.li,{get children(){return[`
`,r(e.p,{get children(){return[r(e.strong,{children:"Dynamic props"}),`:
Dynamic props rely on state, allowing the content or properties to be dynamic.
An example is changing the style of an element in response to interactions within an application.
This can be expressed in the form of signals (`,r(e.code,{children:"value={value()}"}),")."]}}),`
`]}}),`
`,r(e.li,{get children(){return[`
`,r(e.p,{get children(){return[r(e.strong,{children:"Data transfer"}),`:
Props are also used to fill components with data that comes from resources, like `,r(e.a,{href:"/reference/basic-reactivity/create-resource",get children(){return r(e.code,{children:"createResource"})}}),` calls.
This results in components that react in real-time to data changes.`]}}),`
`]}}),`
`]}}),`
`,r(n,{get children(){return[r(e.p,{get children(){return["Expressions, whether fixed or dynamic, get applied ",r(e.em,{children:"in the order defined within the JSX"}),`.
This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `,r(e.code,{children:"type='range'"}),"."]}}),r(e.p,{children:"When order influences an element's behavior, users must define the expressions in the order that the element is expected."})]}}),`
`,r(e.p,{get children(){return["For how to use props effectively in Solid, explore the ",r(e.a,{href:"/concepts/components/props",children:"props page"}),"."]}})]}function l(t={}){const{wrapper:e}=Object.assign({},a(),t.components);return e?r(e,c(t,{get children(){return r(i,t)}})):i(t)}function s(t,e){throw new Error("Expected component `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}export{l as default};
',get children(){return r(e.div,{})}})}})]}})}}),`
`,r(e.h3,{id:"properties-vs-attributes",get children(){return r(e.a,{className:"heading",href:"#properties-vs-attributes",children:"Properties vs. attributes"})}}),`
`,r(e.p,{children:`HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently.
Both offer ways to specify configurations or pass information.
However, HTML is used for standard web content and JSX creates Solid's component logic.`}),`
`,r(e.h4,{id:"html-attributes",get children(){return r(e.a,{className:"heading",href:"#html-attributes",children:"HTML attributes"})}}),`
`,r(e.p,{get children(){return[r(e.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes",children:"HTML attributes"}),` are values set directly on HTML elements.
They provide additional information about an element to guide its initial behavior and state.
These attributes are often translated into properties on DOM objects once the browser parses the HTML.`]}}),`
`,r(e.p,{children:"In JSX files, HTML attributes are used much like regular HTML, with a few key differences due to the blend of HTML and JavaScript:"}),`
`,r(e.ul,{get children(){return[`
`,r(e.li,{get children(){return["Event listeners such as ",r(e.code,{children:"onClick"}),` can be in camelCase or lowercase.
(`,r(e.strong,{children:"Note:"})," When using ESLint, you will get a warning if you use lowercase.)"]}}),`
`,r(e.li,{get children(){return["In cases where you can dynamically specify a value, you can replace the ",r(e.code,{children:'"'})," and ",r(e.code,{children:'"'})," with curly braces (",r(e.code,{children:"{ }"}),"):"]}}),`
`]}}),`
`,r(e.div,{className:"expressive-code",get children(){return r(e.figure,{className:"frame",get children(){return[r(e.figcaption,{className:"header"}),r(e.pre,{tabIndex:"0",get children(){return r(e.code,{get children(){return[r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),r(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),r(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"class"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:"="}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"myClass"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:'"'}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),r(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"onClick"}),r(e.span,{style:{"--1":"#89DDFF"},get children(){return[r(e.span,{style:{"--0":"#C62C2C"},children:"="}),r(e.span,{style:{"--0":"#24292E"},children:"{"})]}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"handleClick"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}>"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Click me!"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}})]}})}}),r(e.div,{className:"copy",get children(){return r(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":'',get children(){return r(e.div,{})}})}})]}})}}),`
`,r(n,{get children(){return[r(e.p,{get children(){return["If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (",r(e.code,{children:"{{ }}"}),")."]}}),r(e.div,{className:"expressive-code",get children(){return r(e.figure,{className:"frame",get children(){return[r(e.figcaption,{className:"header"}),r(e.pre,{tabIndex:"0",get children(){return r(e.code,{get children(){return[r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"<"}),r(e.span,{style:{"--0":"#1E7734","--1":"#F07178"},children:"button"}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:" "}),r(e.span,{style:{"--0":"#6F42C1","--1":"#C792EA"},children:"style"}),r(e.span,{style:{"--1":"#89DDFF"},get children(){return[r(e.span,{style:{"--0":"#C62C2C"},children:"="}),r(e.span,{style:{"--0":"#24292E"},children:"{{"})]}})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"color"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"red"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"font-"}),r(e.span,{style:{"--0":"#24292E","--1":"#F07178"},children:"size"}),r(e.span,{style:{"--0":"#C62C2C","--1":"#89DDFF"},children:":"}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#1E7734","--1":"#C3E88D"},children:"2rem"}),r(e.span,{style:{"--0":"#1E7734","--1":"#89DDFF"},children:"'"}),r(e.span,{style:{"--0":"#212121","--1":"#89DDFF"},children:","})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:"}}>"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{className:"indent",get children(){return r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:" "})}}),r(e.span,{style:{"--0":"#24292E","--1":"#BABED8"},children:"Click me!"})]}})}}),r(e.div,{className:"ec-line",get children(){return r(e.div,{className:"code",get children(){return[r(e.span,{style:{"--0":"#24292E","--1":"#89DDFF"},children:""})]}})}})]}})}}),r(e.div,{className:"copy",get children(){return r(e.button,{title:"Copy to clipboard","data-copied":"Copied!","data-code":"",get children(){return r(e.div,{})}})}})]}})}})]}}),`
`,r(e.h3,{id:"jsx-properties-props",get children(){return r(e.a,{className:"heading",href:"#jsx-properties-props",children:"JSX properties (props)"})}}),`
`,r(e.p,{children:`JSX properties, commonly known as "props," help with the passing of data and configurations to components within an application.
They connect the component with the data it requires, for seamless data flows and dynamic interactions.`}),`
`,r(e.h4,{id:"core-concepts",get children(){return r(e.a,{className:"heading",href:"#core-concepts",children:"Core concepts"})}}),`
`,r(e.ul,{get children(){return[`
`,r(e.li,{get children(){return[`
`,r(e.p,{get children(){return[r(e.strong,{children:"Static props"}),`:
In Solid's JSX, static props are integrated directly into the HTML by cloning the template and using them as attributes.`]}}),`
`]}}),`
`,r(e.li,{get children(){return[`
`,r(e.p,{get children(){return[r(e.strong,{children:"Dynamic props"}),`:
Dynamic props rely on state, allowing the content or properties to be dynamic.
An example is changing the style of an element in response to interactions within an application.
This can be expressed in the form of signals (`,r(e.code,{children:"value={value()}"}),")."]}}),`
`]}}),`
`,r(e.li,{get children(){return[`
`,r(e.p,{get children(){return[r(e.strong,{children:"Data transfer"}),`:
Props are also used to fill components with data that comes from resources, like `,r(e.a,{href:"/reference/basic-reactivity/create-resource",get children(){return r(e.code,{children:"createResource"})}}),` calls.
This results in components that react in real-time to data changes.`]}}),`
`]}}),`
`]}}),`
`,r(n,{get children(){return[r(e.p,{get children(){return["Expressions, whether fixed or dynamic, get applied ",r(e.em,{children:"in the order defined within the JSX"}),`.
This works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `,r(e.code,{children:"type='range'"}),"."]}}),r(e.p,{children:"When order influences an element's behavior, users must define the expressions in the order that the element is expected."})]}}),`
`,r(e.p,{get children(){return["For how to use props effectively in Solid, explore the ",r(e.a,{href:"/concepts/components/props",children:"props page"}),"."]}})]}function l(t={}){const{wrapper:e}=Object.assign({},a(),t.components);return e?r(e,c(t,{get children(){return r(i,t)}})):i(t)}function s(t,e){throw new Error("Expected component `"+t+"` to be defined: you likely forgot to import, pass, or provide it.")}export{l as default};