Code for printing list in React

Question

Below is an implementation of a React app printing list. Are there any areas of improvement/suggestions in below code base

 class ListElement extends React.PureComponent {
 render() {
 return <li onClick={() => this.props.handleClick(this.props.index)}>{this.props.item.text}</li>;
 }
}
class ListComponent extends React.Component {
 handleClick(index) {
 this.props.onClick(index);
 }
 render() {
 const listDetails = this.props.listDetails;
 let height,width;
 if (listDetails.hasOwnProperty("size")) {
 height = listDetails.size.height;
 width = listDetails.size.width;
 }
 return (
 <ul style={{ height: height, width }}>
 {this.props.items.map((item, i) => <ListElement item={item} key={i} index={i} handleClick={this.handleClick.bind(this)}/>)}
 </ul>
 );
 }
 }
 ListComponent.propTypes = {
 items: PropTypes.arrayOf(PropTypes.shape({
 text: PropTypes.string.isRequired
 })).isRequired,
 listDetails: PropTypes.object.isRequired
 };

Answer 1

• Use function syntax/memo when possible
• Use destructuring
• Use object literal shorthand
• Define defaults for width and height
• handleClick is just onClick renamed
• Use tooling for formatting your code (eslint, prettier)
• Prefer ternary over if (not always true)
• Have a well defined API for your components (ListElement needs text, not the entire item, and doesn't really need index)

const ListElement = React.Memo(({ handleClick, label }) => (
 <li onClick={handleClick()}>{label}</li>
));
const ListComponent = React.Memo(
 ({
 items,
 listDetails: {
 size: { height, width }
 },
 onClick
 }) => (
 <ul style={{ height, width }}>
 {items.map(({ text }, i) => (
 <ListElement label={text} key={i} handleClick={() => onClick(i)} />
 ))}
 </ul>
 )
);
ListComponent.propTypes = {
 items: PropTypes.arrayOf(
 PropTypes.shape({
 text: PropTypes.string.isRequired
 })
 ).isRequired,
 listDetails: PropTypes.object.isRequired
};
// Not quite sure I'm setting defaultProps correctly here, but you get the idea
ListComponent.defaultProps = {
 listDetails: { size: { height: DEFAULT_HEIGHT, width: DEFAULT_WIDTH } }
};

You can also update propTypes with the shape of listDetails or change so that ListComponent takes size as an attribute instead, depending on what makes sense in your scenario.