Rerender subsequent components after state change (Blaze)

help
1

Hi guys,

coming from React I wonder if it’s possible to write components in similar manner as with React.

I want task component to be stateless. Just render what it gets via item param and after updating the task just call onUpdate. tasks component keeps the state. I do have problem that I do not know how to do it properly. Following code does not work because Template.instance() in helper returns null.

Is there a way to achieve similar behaviour as in React?

Thanks for help

<template name="tasks">
<div>
  {{#each task in tasks}}
    {{> task item=task onUpdate=onUpdateTask }}
  {{/each}}
</div>
</template>

Template.tasks.onCreated(function() {
  this.state = new ReactiveDict()
  this.state.set('tasks', { 1: { id: 1, name: "Clean house" } })
})

Template.tasks.helpers({
  tasks() { return Template.instance().state.get('tasks') },
  onUpdateTask() {
    const instance = Template.instance() // instance is null in this case
    return (updatedTask) => instance.state.set("tasks", { ...instance.state.get("tasks"), [updatedTask.id]: updatedTask });
    // need to force rerender of task component since it has no state
  }
})
2

It might just be a scoping thing.

I’ve been doing this successfully:

Template.bracketManager.onCreated(function() {
     this.resetBracket = (data) => {
           // do stuff that forces template to re-render or whatever
     }
})

Template.bracketManager.helpers({
     handleReset: function (){
        const self = Template.instance()

        return function (data){
            return self.resetBracket(data)
        };
     }
})