This is about:

• Other (Important Tips)

Component communication might deserve a dedicated page.

Ancestor -> Descendant

straightforward: passing props. Using a context if the descendants can be too deep down the tree.

Descedant -> Ancestor

This is not very obvious. In fact, two people asked the same question on Discord in one day. And personally, I had no clue either despite h

For the most part this just works, but functions within tagged markup get weird indent assertions, e.g.,

        ${collection.map((item) => {
          const { prop1, prop2 } = workWith(item);  // eslint: expected indentation of 4 but found 10 (indent)
          return html`  // eslint: expected indentation of 4 but found 10 (indent)
            <${Widget} prop1=${prop1} prop2=${prop2} />

I'm sorry to post an issue that is missing crucial evidence, but some debugging of a recent config loading bug makes me suspect that the react-rails railtie.rb may be modifying the load order of initializers, and preventing the values in Rails.application.config being as expected.

Whether this happens or not appears to be partly dependent on where in the Gemfile the react-rails gem is l

As per my comment in BuilderIO/mitosis#444 (comment), this is generating confusion.

Things to do:

• rename the .lite.tsx outputted file's extension to original.lite.tsx, because it's actually the original file and is not transformed or generated in any way original generated file, and has not undergone additional mitosis build specific transp

We should be able to use dispatchEvent to define callback prop based onevent APIs, so we don’t have to deal with capturing/bubbling for specific events.

function MyComponent({id}) {
  const onclick = () => {
    this.dispatchEvent(new CustomEvent("customclick", {detail: {id}}));
  };
  
  return (
    /* children */
  );
}

// Usage

<MyComponent oncustomclick={(e

Blocked By: wix/vscode-glean#97

Example:

class Foo extends Component {

  render() {
    return (<div>
      {this.props.foo.map((bar) => <div>{bar.x}</div>)}
    </div>)
  }
}

Current:

 const Foo = props => {
   const foo = useRef();
   const x = useRef();
   return <div>
       {foo.current.map(bar => <div>{x.current}</div>)}