How to handle clicking the checkbox and pass the value into the props?

[gusty sun]

---
let checked: number;
---

{checked}
<label>
  <input type="checkbox">
  check
</label>

<script>
  document.querySelector('input').addEventListener('input', (evt) => {
    // const value = ~~evt.target.checked; // how to pass this value to template?
  });
</script>

[gusty sun]

look like I need a store..

[rapid sundial]

what happens when you add the checked attribute

<input type="checkbox" {checked}>

[gusty sun]

nothing changes

[rapid sundial]

im guessing you would need to set it to true

why is it number?

[gusty sun]

actual result vs expected

it could be a boolean, or text input with a string, doesn't matter

tried with nano store, but there is no reactivity 🤔

[rapid sundial]

it might help to understand that .astro uses a templating language

it allows you to load data for it asynchronously and renders non-reactive html

[gusty sun]

---
import { checked } from '../store.ts';
---

{checked.get()} // not ok, initial value
<label>
  <input type="checkbox">
  check
</label>

<script>
  import { checked } from '../store.ts';
  document.querySelector('input').addEventListener('input', (evt) => {
    checked.set(~~evt.target.checked);
    console.log(checked.get()); // ok here
  });
</script>

hmm..

so how to add some dynamics? 🙂

[rapid sundial]

so the way you have it setup, the store update would happen on the server, but you are expecting the view to update on the client, the only way it could happen would be a full page refresh (astro renders the template again)

think form submissions

youd want to avoid that for something like a checkbox

id recommend letting a framework component do the reactivity

[gusty sun]

refresh the whole page, when you need update only 1 node, am I correct in understanding?

[rapid sundial]

i should clarify, im not saying that's what should happen

just that when you expect reactivity from the server (the code within --- only runs on the server, and the template only renders on the server), refreshes the only way it can update the view on the client

[gusty sun]

yes, I roughly understand, thank you.

I mostly write in angular, I’m used to completely different concepts 😅

so far it looks like astro is not quite suitable for the interactivity I have in mind

[rapid sundial]

you would be right

it is not suitable for any reactivity

it just renders html, like php

[gusty sun]

oh I see, and for reactivity we should use frameworks integrations, rigth?

[rapid sundial]

which is why we allow using react, vue, svelte, solid for interactivity

yes

there are third party integrations for angular and qwik too!

[gusty sun]

but the question arises: isn’t it easier for me to write everything in Angular? 😅

[rapid sundial]

yes it is

[gusty sun]

I guess it depends on the project. if I understood the concept of islands correctly

[rapid sundial]

introducing astro makes sense when performing an initial render of html gets your visitors a better experience

[gusty sun]

if interactivity is needed throughout the entire project, astro is not suitable, but if it is a static site with a separate widget, it may be good

[rapid sundial]

exactly, for something like an interactive dashboard behind a login, the intial render doesnt matter at all, for example - going for a angular/react client-side only spa would be simpler

landing pages, docs, news and articles sites, on the other, benefit a lot from astro

[gusty sun]

thank you, it became much clearer. I’ll go think about what I want more from the current pet project 🙂