Skip to content

Instantly share code, notes, and snippets.

@efjacobson
Last active June 4, 2019 20:00
Show Gist options
  • Save efjacobson/16e9ccd0047494c99fc5f76e786a932e to your computer and use it in GitHub Desktop.
Save efjacobson/16e9ccd0047494c99fc5f76e786a932e to your computer and use it in GitHub Desktop.
import React from 'react';
import PropTypes from 'prop-types';
class coolList extends React.Component {
constructor(props) {
super();
state = {
selectedArticle: props.selectedArticle,
articles: props.articles,
users: props.users,
};
}
componentWillReceiveProps(nextProps) {
this.setState({
selectedArticle: nextProps.selectedArticle,
articles: nextProps.articles,
users: nextProps.users,
});
}
componentDidUpdate(prevProps, prevState) {
document.getElementById(prevProps.selectedArticle.id).classList.add('active');
}
render() {
const { articles } = this.state;
const { users } = this.props;
const articleListItems = [];
for (let i = 0; i < articles.length; i += 1) {
articleListItems.push(<li id={articles[i].id} className="article-list-item">{articles[i].title}</li>);
}
return (
<div className="cool_react-component">
<ul className="USER_LIST">
{users.map(user => (
<li className="userName">{user.name}</li>
))}
</ul>
<ul className="article-list">
{articleListItems}
</ul>
</div>
);
}
}
coolList.propTypes = {
selectedArticle: PropTypes.object.isRequired,
users: PropTypes.object,
articles: PropTypes.object.isRequired,
};
coolList.defaultProps = {
users: [],
};
export default coolList;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment