Skip to content

Instantly share code, notes, and snippets.

@falconmick
Last active October 23, 2018 03:43
Show Gist options
  • Save falconmick/b1fd5974d2ca1394d631363a4485d9f8 to your computer and use it in GitHub Desktop.
Save falconmick/b1fd5974d2ca1394d631363a4485d9f8 to your computer and use it in GitHub Desktop.
const monthsToRenderTempalte = [
{
key: 'month-slot-1',
state: {},
},
{
key: 'month-slot-2',
state: {},
},
{
key: 'month-slot-3',
state: {},
},
{
key: 'month-slot-4',
state: {},
},
{
key: 'month-slot-5',
state: {},
}
];
// would come externally from fetch
const monthsState = [
{foo: "bar jan"},
{foo: "bar feb"},
{foo: "bar mar"},
{foo: "bar apr"},
{foo: "bar jun"},
{foo: "bar jul"},
{foo: "bar aug"},
{foo: "bar sep"},
];
...
moveFoward() {
const { monthsToRender: previousMonths } = this.state;
const monthToRecycle = previousMonths[0];
const nextMonth = magicallyFigureOutNextMontAsIcannotBeBotheredWritingEverything();
const monthsToRender = [...previousMonths.slice(1,5), {key: monthToRecycle.key, state: nextMonth}]
}
render() {
const { monthsToRender } = this.state;
return (
<>
<button onClick={this.moveFoward()}>Next</button>
<ul class="months-container">
{monthsToRender.map(month => (
<li key={month.key}>
{month.state.foo}
</li>
));}
</ul>
</>
);
}
@falconmick
Copy link
Author

basically what your doing is cycling through a set of keys that you continuously render via a map, when you move an item foward, the item that gets pushed all the way off screen is removed and you re-use the key so that react can use dom calls to move the element rather than destroy and re-create

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment