Perspective - Using PropertyTree.write()

Hello,

I would like to understand the PropertyTree.write() and how to use it.

I have my Component Props:

interface SchedulerProps {
    events: Array<Object>;
    writeEventData: Array<Object>;
}

And my reducer function:

getPropsReducer(tree: PropertyTree): SchedulerProps {
        return {      
            events: tree.readArray("events", []),
            writeEventData: (newEvents) => tree.write("events", newEvents)
        };
    }

And I call this in my code:

onEventEdit(updateProps) {
        // where updateProps is an array of objects to be written to the events node/prop
        this.props.props.writeEventData(updateProps);
    }

My questions:

  • Is this the correct way to write new data to a prop?
  • Could you give some examples of how to write tree.write()? Am I using the arrow function correctly in my reducer?
  • What kinds of data types can be passed to tree.write()? Passing an array is causing errors.
  • Is this.props.props.writeEventData(updateProps) the correct way to call it? I get an error saying this is not callable

Any help appreciated!

Thanks,
Kirsty

I’d love to see awnsers on these questions as before 8.1 we could simply write properties by calling this.props.props.write(“property”, value), which isn’t supported anymore.

ok I’ve figured it out.

the props interface can look like this:

export interface someProps {
    someString: string;
    writeSomeString(aString: string): void;
}

event handler like this:

    @bind 
    someEventHandler (aString: string){
        this.props.props.writeSomeString(aString);
    }

and getPropsReducer like this:

getPropsReducer(tree: PropertyTree): someProps {
        return {
            someString: tree.readString('someString'),
            writeSomeString: (aString: string) => tree.write("someString", aString)
        };
    }

1 Like

I’m using the PropertyTree.write(_) method and successfully writing values to the property.

The thing is, its writing to the the property of every instance of my component…not what I was looking for. The property I’m writing to is a bound tag and each instance of my component is bound to a different tag…I need to be able to target a specific component instance.
EDIT: I was wrong…it wasn’t doing the above…it just appeared to do that.

@kirsty , I’m guessing this is the behavior you’re looking for as well? Did you solve it? Please share if you did :slight_smile:

Incidentally, I learned that writing to a property from the getPropsReducer(_) method will cause that same method to be call when you write setting up a possibility for an continuous loop if the value you’re writing changes frequently.

Regards,
Ted.

Hi @edward.fowler,

Not sure if my solution is helpful to tag bindings but here is how I solved it…The component I was working on was a calendar/scheduler with a drag and drop feature. I wanted the property tree to change every time an event was dropped to a new timeslot. The component was bound to SQL queries. I ended up solving it by having a “Save” button that would write changes to the database, and then the SQL query binding would refresh the property tree for me.

I couldn’t figure out how to use the tree.write() method. Also, React docs state that props should be read only and a component must never modify its own props, so I thought passing new data to the component was probably a better way of going about it regardless.

After @bas.dejong posted the solution to tree.write() I tested it out and it worked. But I didn’t use it with bindings and I still prefer to pass new props to the component.

:slight_smile:

Thank you Kirsty. I created a post of this subject…maybe its helpful in the future…if I get it figured out :slight_smile: