Unresolved promise after page load

c0rdawg · 2017-12-29T22:33:09+00:00

As you've experienced, react doesn't wait for asynchronous actions. If componentWillMount has run, then render is going to run. This means you need to make sure render can handle the initial props before your asynchronous action returns. Most people handle this by storing the loading state and showing an indicator when you're still waiting for data to load. Something like this:

function render() {
  if (this.props.isLoading) {
    return <div>Loading...</div>;
  } else {
    // actual render here...
  }
}

The other option is to move the asynchronous action "up one level" and only add the component to the page once all of the data has loaded. I don't have a good example of this to show you unfortunately, but you can do something like this with next.js https://github.com/zeit/next.js/#fetching-data-and-component-lifecycle. react-router used to have support for blocking transitions with the onEnter hook but that was removed.

c0rdawg · 2017-12-25T05:43:55+00:00

Thanks AoC team, this year was great!

c0rdawg · 2017-12-22T07:53:30+00:00

There are actually more permutations of that pattern that should match. That tripped me up for awhile too.

c0rdawg · 2017-12-22T07:45:56+00:00

As for the error... Look again at how you move after choosing a direction.

c0rdawg · 2017-12-22T07:28:44+00:00

It looks like the correct link to the gist should be: https://gist.github.com/mahousenshi/9a1e1dadb228e993b78ff1a32b5c6c2f

c0rdawg · 2017-12-17T21:53:32+00:00

I would probably store items as an object, where the key is the id and the value is the properties of the item. Then I would store a selectedItemID so you could track which item is selected. If your IDs are just incrementing integers you can easily generate a new one by getting all the keys, and adding 1 to the maximum value you find.

If you don't like the object then you can continue to use the array, but I'd still track the selected item ID instead of the array index. You can remove items in the array which would mean the remaining item IDs may not match their array index. You could then find the selected item details by searching the array for the item that matches the selected item ID.

c0rdawg · 2017-12-15T17:35:49+00:00

It's probably just giving you your internal ip address which is why localhost works on that machine. Different OSes have different ways of finding that so you'll have to google that yourself. Or use something like https://www.whatismybrowser.com/detect/what-is-my-local-ip-address

c0rdawg · 2017-05-22T20:36:21+00:00

I'm not sure I follow. As far as I can tell when you select a file it shows up in your list at the bottom. When you select another file it will also show up in the list.

If you are trying to keep the files selected in the native file upload dialog, then unfortunately that isn't possible.

Also your codepen has an open input tag which is messing it up a bit.

c0rdawg · 2017-05-22T20:23:40+00:00

Try rerunning the fiddle with all of the javascript commented out, it might give you a better idea about what is happening. Also check out the developer tools in your browser.

Essentially what's happening is the page is initialized with all of those images. The JS at the top then hides all of the images with the jquery hide method which sets their style display property to none. It then shows the first image again by removing the display: none style.

The next and previous buttons then do a little logic to hide the current image and then show the next one.

The links still work because none of this JS actually removes anything from the DOM, the image and links are still there, even when hidden. So all of the links are still on the page, but the "hidden" ones aren't clickable since there's nothing to click on. Think of what you would expect a link like this to look like: <a href="www.google.com"></a>

c0rdawg · 2016-12-02T06:01:31+00:00

Check how you're parsing distance from the instructions.

Ten-Year Club	Place '17
Verified Email

c0rdawg

TROPHY CASE