UI Components - Parent - Child communications
Tags: dml, javascript
Published: 2021-08-18 08:24:22

With DML, it's very easy to make Parent / Child communication.

```js

// make : wrapper around createElement
const cType = (type) => (content, props) => make(type, props, content)

const h1 = cType("h1");
const div = cType("div");
const button = cType("button");
const br = () => make("br");


function Parent () {
  selectBase(div('', "background:darkorange; padding:10px; margin:10px"))
  h1("Parent")
  let c = Counter();
  br()
  button("inc child counter").onclick = () => c.incby(1);
  unselectBase()
}

function Counter () {
    selectBase(div("I am the child...", "border: 1px solid red; padding:10px;background:orange"))
      let value = div("0");
      let incby = (val) =>  value.innerText = Number(value.innerText)+val
      button("inc").onclick = () => incby(1);
      button("dec").onclick = () => incby(-1);
    unselectBase()
    return { incby }
}


Parent();
Parent();
Parent()

```
You try it here : [ParentChild](https://flems.io/#0=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-o+tx2MQBYEV+YVD6ULPvOcWYZHIskLcW-o5b93wChjcxD1J9ji17XIdAdhj5DLjSMehnZaNQCqHhndoi46ToJFR8YLH6O8Zo3R9jBG92jmIxu34LQyM6hkKkCg+rfCXCEtwOIlArC4jo18MgqIoBd1iHK1hji5ANDdfdGt3ALYeu9RZwIfr8I2Fg6W+DMiWLYZbCJ0thHRwYbZDcwT-HPM+erWB9dkGSH4UGs04dQG7AdtuQ9JzUB4PNpiwU9tsRSSGX8dBrIjYDQECnjpkmKpRaswJOzHmsVuZ81iMVsQQsRZfovnIq+LFqG3wAOR6MuJ1rjOokv62oQ1YyszxRVblhdQbhJhvJ1G+i-DzmZuMN8GmdhLaSBxGI3Hdc65lqEAJl+TgQgVQAHYAAcSBaCqHUCAPgAglD6EMCAOTJgxBKCmPsKLLQbSuhILB6wlhiudH7YOuQUw5PhFiGA1rnxh3Ec2MqU+xgGi1BtWQTIHWNjKm+-DtHxrCt1ZM1VN8kOMgiBVK-GH5YhIU55RD2QUPPlU9a0JT59O0SM4yEIiI2ooHU8-iAHnsgOdk69NYLY8FscyTNoLk2HOG3cKsDBZooR4KIZyozM8nyCSdc67UI0Dg1iXHILppAV6SCrEiD-bsrhv4wCuEgNUmQEquEGiQS4KQne0Bd0GOOFOhIq6SK+dRsZ2Y3y2I41EqktXi5urGYX3AhIpBvqFCtdXo-wiDOgWQRBbyRhYuSaXRBAFojsGa0r856bHn1rxHLjbtRR5M9YdXDVNf6x10aYorQwDxV6KvCt6Ah+HUN5ELSbVVQu7CBQaAsMoB27aKUuU3uXfOCN6sE3wOkDW7lCsrL21Rk-C2z2spQlaAc+VTDFP5e4eHMR9SMZW3S-AJYUlT4aD6GrRIASR-+rl0kFf1jkkjGW2kT2TzRGz1z3z3WElyL2VGvwrzMy9CMV5zZxxEgLRGgLhzgJ1iIHLwJEpjdWr0JjPH6wegsQQOdX8SmCDyHUMloLkEVQYINF4jfDfH2xkAqHMhICUAcFWikAOwZieGOxAGwGwCu1GloCuxuw0AeyEEYXSg4JR1MGUBUGYDu00CUBkEzxIEil8AIASEQBUCAA)