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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions