Skip to content
This repository was archived by the owner on Dec 15, 2022. It is now read-only.
This repository was archived by the owner on Dec 15, 2022. It is now read-only.

How to move an Etch component's child? #69

@illright

Description

@illright

Consider the following scenario:
I have a root component that holds some rows. I also have a button that should be a child of the latest row at all times.

On the root component creation it holds a single row which in turn holds the button, so the inital markup looks like this:

<Root>
  <Row ref="row0">
    <Button ref="btn" />
  </Row>
</Root>

Then at some point I append another Row inside Root and I want the markup to look like this:

<Root>
  <Row ref="row0"></Row>
  <Row ref="row1">
    <Button ref="btn" />  // this should point to the same DOM node as the previous Button
  </Row>
</Root>

Here's my attempt at doing this:

class Button {
  constructor() {
    etch.initialize(this);
  }

  render() {
    return (
      <button>Test</button>
    );
  }

  update() {
    return etch.update(this);
  }
}

class Row {
  constructor(props, children) {
    this.children = children;
    etch.initialize(this);
  }

  render() {
    return (
      <div>
        {this.children}
      </div>
    );
  }

  update() {
    return etch.update(this);
  }
}

export default class Root {
  constructor() {
    this.otherRows = [];
    this.rowCount = 1;
    etch.initialize(this);
  }

  render() {
    return (
      <div>
        <Row ref="row0">
          <Button ref="btn" />
        </Row>
        {this.otherRows}
      </div>
    );
  }

  addRow() {
    const lastRow = this.refs[`row${this.rowCount - 1}`];
    const button = lastRow.children.pop();
    const newRow = new Row({}, [button]);

    this.otherRows.push(newRow);
    this.update();
    this.rowCount++;
  }

  update() {
    return etch.update(this);
  }
}

And when I call the addRow method after Root's establishment, I get the following markup:

<div> // This is the Root
  <div>  // This is a Row
    <button />
  </div>
  <undefined>
    <button />
  </undefined>
</div>

And it seems like the two buttons that appear in the markup are different DOM nodes.
How do I achieve my goal?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions