Updating NestedComponents via refs is not working

[pipiobjo]

Hi,

I tried to update a Subcomponent via refs as documented here https://metaljs.com/docs/guides/nested-components.html. I'm not sure if I do it right.

Therefore I created a sample project https://github.com/pipiobjo/metal-troubleshooting/tree/master/metal-nested-component

The parent component "NestedComponent" should update the text color of the SubComponent.
Usecase is to create a component to handle a search form and another to handle the results.

In the SoyTemplate of the parent I call the SubComponent via:

{call SubComponent.render}
      {param id: $id + '-searchResults' /}
      {param ref: 'SearchResults' /}
{/call}

And in the JS I call it via

  this.refs.SearchResults.textColorSub = "text-success";
  this.refs.SearchResults.setState({textColorSub : "text-success"});

In the browser console I see the setter method is called, but after that its resetted to the default value defined in the State of the SubComponent

Reproduction Steps:

• num run start
• open https://localhost:4000/demos/
• click the first "click me" span
• the first pharagraph is updated to "text-secondary"
• the second pharagraph gets "text-primary"
• the second "click me" span just prints the actual js value of the object

Expected Behaviour

• the second paragraph gets updated to "text-success"

Any help would be great, thanks in advance.

[robframpton]

Hey @pipiobjo,

Generally speaking that's not the recommended way of passing updated data to child components, instead you should pass the data down through params.

Let's say your parent component also has textColorSub in it's STATE. All you would need to do is update the value on the parent component, and pass it to the child component as a param.

{call SubComponent.render}
      {param id: $id + '-searchResults' /}
      {param textColorSub: $textColorSub /}
{/call}

That way the SubComponent will rerender when the textColorSub of the parent is updated.

Hope that helps, let me know if you need more information.

[pipiobjo]

Hi @Robert-Frampton

thanks for response.

Exactly thats the main behaviour as I understood it, but our usecase is slightly different.
For example we have a ParentComponent that has some reloading icon and a SubComponent which should be triggered, to do some fetch calls and than update his own state.

Yes we could merge that data before, but I would expect a clean way to communicate with a already rendered and instantiated subcomponent. I thought that would be the usecase for using refs?

Thanks in advance.

[robframpton]

Hey @pipiobjo,

You might want to try configuring the SubComponent's state with internal: true (https://metaljs.com/docs/guides/state.html#internal_states).

That way the parent component doesn't overwrite anything by mistake.

[pipiobjo]

Nice works. Maybe a hint in the documentation would be nice that a setter cant be called directly.