How to set the component props in script

[obsidian rover]

Hello, everyone
Now I'm here to get help from you
I imported custom component and it has props
I'd like to updated the props by click function
how can I implement that functionality?
If someone helps this, I would really appreciate that

[obsidian rover]

Hello, @safe trench
could you kindly help this problem for me please?

[autumn mango]

You could use a nano store and set the value of the nano stores Atom when a button is clicked. Subscribe to that atom in the component

[obsidian rover]

hello, @autumn mango
thanks for your help
if possible, could you share with me some example code of it please?

[autumn mango]

Yeah so maybe Henri has another idea or a different way to do this but this is what I do:

1. install nanostores: npm install nanostores
2. create src/utils/store,js file
3. in that file import atom and use it to make a variable:

import { atom } from 'nanostores'
export const searchTerm = atom('')

4. In the component that changes the atom variables value you want to use a script to change it:

<script>
  import { searchTerm } from '../utils/store'

  const button = document.querySelector('button')
  button.addEventListener('click', () => {
    searchTerm.set('magnanamous')
  })
</script>

Then where you originally wanted to pass props you can instead subscribe to the atom. It would be easier if this was a framework component.... like solidJS.

import { searchTerm } from '@utils/store'
import { useStore } from '@nanostores/solid'

export function SearchResults() {
    const $searchTerm = useStore(searchTerm)

    return <h1>{searchTerm}</h1>
}

I think this is right. I might have messed something small up....

These pages are really good too: https://docs.astro.build/en/recipes/sharing-state/
https://docs.astro.build/en/recipes/sharing-state-islands/

[obsidian rover]

thanks very much @autumn mango
this is very useful

[daring ore]

Hello friend, please try to avoid pinging specific members of support. All of them are here providing support voluntarily in their free time and if any of them has the knowledge and time to help with your issue, rest assured they will. 🙂

[obsidian rover]

I added a components which has props in astro file like this

<div>
  <input type="text"/>
  <button/>
  <myComponent name = "Haly"/>
<div>

after input text and when I click the button, I'd like to change the name props of myComponent as input.value
is it possible in astro?

[autumn mango]

Regular javascript variable aren't reactive right? So even if you change the value of name it will never change in the component you pass it to. If you want to stick with regular javascript and not a framework component you need to use something like a nanostore that has reactive variables.

We make our variable:

/* store.js */
import { atom } from 'nanostores'

export const name = atom('Haly')

Our First Component where we get the value of the input and change the value of the nanostore to what the user enters in the input

---
/* A Component */
___
<form>
  <input type='text' name='name' />
  <button type='submit'>Change Name</button>
</form>

<script>
import { name } from '../store'

form = document.querySelector('form')

form.addEventListener('submit', (event) => {
  event.preventDefault()
  
  const formData = new FormData(form)
  const newName = formData.get('name')
  name.set(newName)

}

</script>

Our second component where we use the name of the value from the input:

---
/* B Component */
---

<h1></h1>

<script>

import { name } from '../store'

const h1 = document.querySelector('h1')

name.subscribe((selectedName) => {
  h1.textContent = selectedName
})
</script>

I may have made a typo somewhere

[obsidian rover]

thanks @autumn mango