This is a flex-box

`)),mdx(BookmarkCard,{url:"https://www.cbsofyalioglu.com/blogging/best-blogging-sites/",image:"/posts/best-blogging.webp",title:"The List of Best Blogging Platforms",description:"The list of best blogging platforms for your creative works. The list includes free and paid platforms.",mdxType:"BookmarkCard"}),mdx("h2",null,"Control Flow"),mdx("h3",null,"Show"),mdx("p",null,"SolidJS allows us to use\xA0",mdx("a",n({parentName:"p"},{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator"}),"ternary operator"),". However, builtin\xA0",mdx("a",n({parentName:"p"},{href:"https://www.solidjs.com/docs/latest/api#%3Cshow%3E"}),"Show component"),"\xA0is used specifically for this case."),mdx("pre",null,mdx("code",n({parentName:"pre"},{className:"language-typescript"}),`function Show(props: { when: T | undefined | null | false; fallback?: JSX.Element; children: JSX.Element | ((item: T) => JSX.Element); }): () => JSX.Element; `)),mdx("p",null,"Show component has two props\xA0",mdx("inlineCode",{parentName:"p"},"when"),"and\xA0",mdx("inlineCode",{parentName:"p"},"fallback"),". If\xA0",mdx("inlineCode",{parentName:"p"},"when"),"\xA0prop is truthy then the children element will be rendered. Otherwise,\xA0",mdx("inlineCode",{parentName:"p"},"fallback"),"\xA0component will be rendered."),mdx("pre",null,mdx("code",n({parentName:"pre"},{className:"language-jsx"}),`const OddComponent = () =>

Odd! (if the count value is an odd number)

; const EvenComponent = () =>

Even! (if the count value is an even number)

; const Counter = () => { const [count, setCount] = createSignal(0); const myStyle = \`display: flex; flex-direction:column\`; return (

Count: {count()}

); }; `)),mdx("p",null,"Then put Counter component to App component."),mdx("pre",null,mdx("code",n({parentName:"pre"},{className:"language-jsx"}),`function App() { return (

); } `)),mdx("p",null,"It is interesting that\xA0",mdx("inlineCode",{parentName:"p"},"fallback"),"\xA0prop accepts those:"),mdx("pre",null,mdx("code",n({parentName:"pre"},{className:"language-jsx"}),`// \u2705 Component }> // \u2705 Function that returns component }> // \u2705 Component variable `)),mdx("p",null,"It will continue..."))}MDXContent.isMDXComponent=!0;