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
};