Editing ray

Title / Description

Code
<Lifecycle props={{ list }} getDerivedStateFromProps={(props, state) => { const plist = props.list, slist = state.list; if (plist.length > slist.length) { return { list: plist.map(pit => slist.findIndex(sit => sit.id===pit.id) > -1 ? pit : { ...pit, just_insert: true } ) } } if (plist.length < slist.length) { return { list: slist.map(sit => slist.find(pit => sit.id===pit.id) || { ...sit, just_remove: true } ) } } return props; }} componentDidUpdate={(prevProps, prevState, snapshot, instance) => { setTimeout(() => { instance.setState(state => ({ list: state.list.filter(it => !it.just_insert && !it.just_remove) })); }, 300); }} > {state => state.list.map(it => ( <div key={it.id} className={`${it.just_insert ? 'inserting' : ''} ${it.just_remove ? 'removing' : ''}`}> content </div> ))} </Lifecycle>

Author

Highlight as C C++ CSS Clojure Delphi ERb Groovy (beta) HAML HTML JSON Java JavaScript PHP Plain text Python Ruby SQL XML YAML diff code