Parent component setState inside passed handler to child about deku HOT 5 CLOSED

Hi @voronianski, You just needed to move your handlers into the render method.

import { tree, render, element } from 'deku';

import deku from 'deku';

let Button = {
  render(component) {
    const { props } = component;

    function handleClick(e, component) {
      e.preventDefault();
      let { onToggle } = component.props;
      onToggle();
    }

    return (
      <button onClick={handleClick}>
        {props.playing ? 'Pause' : 'Play'}
      </button>
    );
  }
};

let Container = {
  initialState() {
    return {
      playing: false
    };
  },

  render(component, setState) {
    let { state } = component;

    function handleClick() {
      setState({
        playing: !state.playing
      })
    }

    return (
      <div>
        <div>Some widget content</div>
        <Button playing={state.playing} onToggle={ handleClick} />
      </div>
    );
  }
};

let app = tree(
  <Container someProp="someData" />
);

render(app, document.body);

from deku.

@chrisbuttery thanks, that should solve the issue. I just thought that creating handlers on every render isn't good idea.

from deku.

You also get setState passed in as the third param to handlers. But generally I just do what @chrisbuttery showed you.

from deku.

@anthonyshort alright I'll follow this pattern. Anyway it will be great to have some input on app.set API as well.

from deku.

I'm spending most of tomorrow writing up some documentation so it should make more sense. But the app.set is a way to load data side-ways into the tree rather than needing to pass it down. It's for external data, like communicating with the your JSON API on the server. We're using it for:

• Routing - since a router is just an external data source
• Getting the logged in user
• Communicating with our JSON API

I guess it's sort of like React's context object, but you can't modify it as you go down the tree.

from deku.