Tcomb-form-native: I cannot access to the properties of a list item (and change them)

[AlessandroAnnini]

Version

Tell us which versions you are using:

• tcomb-form-native v0.6.7
• react-native v0.42.0

Small Mockup

const Model = t.struct({
  id: t.String,
  name: t.String,
  parts: t.list(
    t.struct({
      id: t.String,
      name: t.String,
    }),
  ),
});

// ......

const myParts = this.form.getComponent('parts');
const itemArray = myParts.getItems();
itemArray[0].setState({ id: 'newIdValue' }); // setState does not exists here!!

Explanation

I expect to have an array of items in itemArray, instead I have something else.
So i don't know how to programmatically change a property of an item of a list.

[javiercr]

@sun2rise it's hard to tell what's going on without reading the full code for the component. From your snippet is not clear where those 3 lines are being executed, and what's the implementation for myParts.getItems().

Could you share the full code for the relevant components?

[AlessandroAnnini]

Thanks @javiercr I cannot share the full code but i will try to make my best and be more clear!

Meanwhile... am I right if i say that the only way to change dynamically the value of a field when another one changes is accessing a field like this and like I was attempting to show in my previous post?

[javiercr]

So far I've never had to use getComponent(path) so I cannot give you advice on that.

If what you want to achieve is to make the list of items for a t.list dynamic, then you can do something like this:

const Model = t.struct({
  id: t.String,
  name: t.String,
  parts: t.list(
    t.struct({
      id: t.String,
      name: t.String,
    }),
  ),
});

var YourComponent = React.createClass({

  getFormOptions() {
    // Here you can access this.state or this.props 
    // and write any kind of logic to generate the proper options / items
    const partsOptions = 1;//...

    return {
      fields: {
        parts: partsOptions
        }
      }
    }
  }

  render() {
    return (
      <Form
        ref="form"
        type={Model}
        options={this.getFormOptions()}
      />
    );
  }
});

(Note I haven't tested the code, it may contain errors).

[AlessandroAnnini]

This makes sense but I was using getComponent because what triggers my change is from another field of the form itself, and it seems I cannot see that change from my this.state or my this.props.. that's why I was using that strategy

[javiercr]

@sun2rise

Just add value={this.state.form} onChange={this.onChange} to <Form>, and implement it like this:

 onChange(form) {
    this.setState({ form });
  }

This will trigger a re-render and therefore getFormOptions() will be called again with the new form state accesible in this.state.form.

[alvaromb]

Remember to bind the onChange function in the constructor or assign an arrow function like this:

_onChange = (value: Object) => {
  this.setState({value})
}

[javiercr]

Ops, good catch @alvaromb! :)

[AlessandroAnnini]

@javiercr @alvaromb thank you very much, that's the way, I implemented it and it works just good!

[gcanti]

Hi @javiercr, @sun2rise, would you be interested in helping to maintain this lib?

[javiercr]

@gcanti sure, I'm using it in a big project. So I'll be happy to help :)

[AlessandroAnnini]

@gcanti I'm just making some experiment for now, so I cannot grant so much, but if everything goes as planned I will be happy to help too!

[gcanti]

Awesome, thanks

[alvaromb]

Hi @javiercr @sun2rise!

There's a lot of work to do here, so any help would be really appreciated. I have to maintain our own company internal repos too and unfortunately I don't have time enough for all. Feel free to ping me anytime if you need something.

And thanks @gcanti for bringing more people :)

[javiercr]

@alvaromb thank you for the warm welcome. I see we're all a little busy building awesome secret apps with RN (and tcomb-form-native of course). I'll try to do my bit of help to keep improving the library :)