React State Management with Element Re-organisation

Curriculum Help
1

This was supposed to be a quick 1-day project, but I have been on this issue for a few hours:

Expected Behaviour:

  • User is able to click on star to make it a favourite
  • User is able to re-organise tiles, as they please
  • User is able to make a re-organised tile favourited, and un-favourited

Current Behaviour:

  • User is able to re-organise tiles
  • User is able to favourite and un-favourite tile, provided it has not been moved

I assume this is a simple issue.

GitHub Code: contribution-board/App.js at master · ShaunSHamilton/contribution-board (github.com)

Live site: Shaun Hamilton: Contribution Dashboard (shaunshamilton.github.io)

This is no where near complete, and I have purposefully disconnected the app from the backend, because I do not have rate-limiting on the backend. So, the data is missing some things.

I assumed giving each Tile a unique key would have sufficed to not cause this issue. currently, the key is the index of each element, just because the test data does not have any other unique element. I did test with an actual unique identifier in the production code, but no change

Any help is much appreciated.

2

Not sure if it’s helping but the “favourite/star” button of a dragged article has no click event listener (for whatever reason).

3

You are quite right on this.

It seems adding the event listener back would be enough. It just looks odd with all the state I have to pass around, in order to achieve this.

Thank you, for that. You definitely pointed me in the right direction :+1:

4

Glad it helped, I can’t say that I did much except looking at the live version in FireFox dev tools, which has this nice feature of showing an event tag if an event listener is attached to an element, and noticed that it was missing.

Let me pick your brain a little if you don’t mind, I see a lot of vanilla DOM manipulation methods in your code like querySelector('thing').addEventListener('blah', handleBlah), is that normal in React code? Because I always think that instead of doing that, I should rather attach an onBlah event to the element when rendering, to make sure I do it the “React” way.

5

Not in the slightest… I have just been refactoring this, but originally had it as vanilla JS so everything is quite messy, and mismatched.

Up til’ you mentioned that, it had actually slipped my mind that React has events other than onClick… :see_no_evil: Perhaps that will resolve the issue in a more reliable way.

Thank you, again.