Code for printing list in React
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.