Code for printing list in React 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 &lt;li onClick={() =&gt; this.props.handleClick(this.props.index)}&gt;{this.props.item.text}&lt;/li&gt;;
   }
}

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 (
               &lt;ul style={{  height: height, width }}&gt;
                   {this.props.items.map((item, i) =&gt; &lt;ListElement item={item} key={i} index={i} handleClick={this.handleClick.bind(this)}/&gt;)}
               &lt;/ul&gt;
           );
       }
    }

    ListComponent.propTypes = {
       items: PropTypes.arrayOf(PropTypes.shape({
           text: PropTypes.string.isRequired
       })).isRequired,
       listDetails: PropTypes.object.isRequired
    };
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 }) =&gt; (
  &lt;li onClick={handleClick()}&gt;{label}&lt;/li&gt;
));

const ListComponent = React.Memo(
  ({
    items,
    listDetails: {
      size: { height, width }
    },
    onClick
  }) =&gt; (
    &lt;ul style={{ height, width }}&gt;
      {items.map(({ text }, i) =&gt; (
        &lt;ListElement label={text} key={i} handleClick={() =&gt; onClick(i)} /&gt;
      ))}
    &lt;/ul&gt;
  )
);

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.