Last active
June 30, 2021 04:40
-
-
Save mzaini30/96ac47c9cbf86c9b0f28905d2cd0966f to your computer and use it in GitHub Desktop.
Kumpulan Sintaks SolidJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { createRenderEffect, createSignal, For } from "solid-js"; | |
| function App() { | |
| const [language, setLanguage] = createSignal([]) | |
| const languages = ['Inggris', 'Indo', 'Jepang', 'Spanyol'] | |
| function checkHandler(item, element) { | |
| if (element.target.checked) { | |
| setLanguage([...language(), item]) | |
| } else { | |
| setLanguage([language().filter(o => o !== item)]) | |
| } | |
| } | |
| return ( | |
| <div class="min-h-screen h-full bg-gray-900"> | |
| <div className="container mx-auto px-40 py-6"> | |
| <header class="flex flex-col text-white"> | |
| <h1 className="text-4xl font-bold">simple form buat nyoba alternative <code>bind:value</code> dan <code>bind:group</code></h1> | |
| <form action=""> | |
| <div className="flex flex-row py-4"> | |
| <For each={languages}>{item => | |
| <div className="flex-1"> | |
| <input type="checkbox" name="language" id="" class="bg-gray-200 p-2" value={item} onChange={[checkHandler, item]}/> | |
| <label htmlFor="language" class="px-4">{item}</label> | |
| </div> | |
| }</For> | |
| </div> | |
| <div class="text-white"> | |
| Bahasa yang kamu bisa: {language().join(', ')} | |
| </div> | |
| </form> | |
| </header> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {createSignal} from 'solid-js' | |
| const [data, setData] = createSignal({nama: ''}) | |
| const App = () => ( | |
| <div className=""> | |
| {JSON.stringify(data())} | |
| <h1>Nama : {data().nama}</h1> | |
| <input type="text" value={data().nama} onInput={x => setData({nama: x.target.value})}/> | |
| </div> | |
| ) | |
| export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import {createSignal} from 'solid-js' | |
| const [panggil, setPanggil] = createSignal('Dunia') | |
| const App = () => ( | |
| <div className=""> | |
| <h1>Halo {panggil()}</h1> | |
| <input type="text" value={panggil()} onInput={x => setPanggil(x.target.value)}/> | |
| </div> | |
| ) | |
| export default App |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment