S
SolidJS•3mo ago
Liquido

What's the right way to make `textarea` elements reactive?

I have a store that I pass to a component. When I output the store value, it is working for normal text (e.g inside span), input elements, it does not show anything for textarea elements: 
const store = createStore([{
  id: '1', value: 'hello'
}])

function Item(props) {
  return <>
    {props.data.value}
    <input value={props.data.value} />
    <textarea value={props.data.value} /> {/* Does not render anything, even on initial value */}
  </>
}

function List(props) {
  return <For each={props.store}>
    {item => <Item data={item} />}
  </For>
}
const store = createStore([{
  id: '1', value: 'hello'
}])

function Item(props) {
  return <>
    {props.data.value}
    <input value={props.data.value} />
    <textarea value={props.data.value} /> {/* Does not render anything, even on initial value */}
  </>
}

function List(props) {
  return <For each={props.store}>
    {item => <Item data={item} />}
  </For>
}
4 Replies
brenelz
brenelz•3mo ago
Isn't textarea like this: <textarea>{props.data.value}</textarea>
Liquido
LiquidoOP•3mo ago
This worked thank you!
bigmistqke
bigmistqke•3mo ago
I tripped over that bug one time too and asked about it here. It seems to be caused by some oddities of how the html element is implemented.
Liquido
LiquidoOP•3mo ago
@Tito do you a link to docs about this?

Did you find this page helpful?