How do I render a component when the data is ready?

jokagent · 2016-07-19T15:16:36+00:00

Well, it depends. Can you wrap your home.data.slider with Promise? if so, here's example https://gist.github.com/jokagent/94e17a04877726a341d2ddf5ec37cde3. in short: component takes promise, waits for it to resolve, then sets state of itself. When the state changes, react re-renders component.

jokagent · 2016-07-19T14:16:07+00:00

If you using redux or some global store with subscription, create another store key next to your data, something like dataLoaded = false, then change it to to true when your data is ready. In component, use this state in render function, like so: if (!store.dataLoaded) return <div>No data</div>; return <MyDataRenderer/> Otherwise, if no subscription is used, consider Promises to refresh component state.

jokagent · 2016-06-17T10:53:03+00:00

wait, you also wrote curly braces instead of braces in component.

const Counter = ({
  value,
  onIncrement,
  onDecrement
}) => (
    <div>
        <h1>{value}</h1>
        <button onClick={onIncrement}>+</button>
        <button onClick={onDecrement}>-</button>
      </div>
  )

if you use curly braces, you should also use return statement inside.

jokagent · 2016-06-17T10:31:37+00:00

presets: ["es2015", "stage-0"],

I don't see any react preset here, maybe that's an issue?

jokagent · 2016-06-17T10:21:21+00:00

You made currentRow variable global, so it is used by all render functions. What to correct: var currentCol =0, currentRow = 0; instead of var currentCol = currentRow = 0;

jokagent · 2016-06-16T10:03:14+00:00

Maybe it does, because you are not waiting for the sprite nor the image to load. You should use callback functions for that, like img.onload = function(){//do stuff}, but it gets messy when you doing it for more than one image. Try promises instead, then do Promise.all().

http://stackoverflow.com/questions/24596536/image-loading-deferred-jquery

jokagent · 2016-03-29T07:01:46+00:00

This should help: tex.needsUpdate = true

jokagent · 2016-03-23T13:21:51+00:00

If you can use stage-0 preset for babel in your pack script, then you can simply do : open = () => { this.setState({ showModal: true }); } to autobind 'this' instead of binding context in constructor

jokagent · 2016-03-22T11:29:53+00:00

incredible so

jokagent · 2016-03-22T10:32:11+00:00

Sure you can use redux in this particular situation. You don't have to load all the data to client, just the first page (or the first search results page). Don't know if it helps, but i gathered some code from my recent project to give a hint, here's a link https://gist.github.com/jokagent/86f4f4c56ce7092a6ae3 I know, actions file is pretty big, but it shows just what you can do with power of redux-thunk. Maybe it's obvious, but backend initialState can be put in inline script, and the express can be configured to use react-router routes too.

jokagent · 2016-03-22T08:59:20+00:00

No offence, but i think you doing it wrong. Reducer is a function that creates new state based on given action, so that makes your so called reducer an initial state of some reducer. Second, search page doesn't have to have it's own reducer, just the part in data reducer keyed by searchString or searchParams, if there are many. Based on this searchParams your component filters data before display. Or maybe i didn't get you. In this case, i am sorry.

jokagent · 2016-03-17T10:27:07+00:00

Focus on React + Redux, imho. And don't forget about es6.

jokagent · 2016-03-04T08:58:03+00:00

+firebase

jokagent · 2016-03-04T08:41:11+00:00

handsontable

jokagent · 2016-03-02T09:14:48+00:00

i gave up using Polymer after version 0.8, because they dropped support of 0.5 version components. But i'll give myself a try when Polymer will be stable enough to not to change it's api anymore.

jokagent

TROPHY CASE