不变违规：缩小反应错误 #152；

Question

Not sure what I am doing wrong here, I have a component which I am rendering as <LoadPanel /> . I do not quite understand the Invariant Violation: Minified React error #152; error I am getting. Am I not returning something in the correct way? ie something ? somethingelse : whatever something ? somethingelse : whatever If you have any suggestions how I should render this component that would be great.

render() {
  const items = this.state.items;
  const LoadPanel = () => {
  document.addEventListener("click", function(e) {
  items &&
      items.length > 0 &&
      items.map(item => {
        if (item.ElemId === e.target.id) {
          return (
            <div class="side-panel" id={item.ElemId}>
              <FinderServices
                title={item.Title}
                description={item.Description}
                resultsTitle={item.ResultsTitle}
                finderItems={item.Results}
              />
            </div>
          );
        } else if (item.ElemId === e.target.id) {
          return (
            <div class="side-panel" id={item.ElemId}>
              <DonationStory
                title={item.Title}
                description={item.Description}
                resultsTitle={item.ResultsTitle}
                donateItems={item.Results}
              />
            </div>
          );
        } else {
           return null;
        }

      });
  });
  };

  return (
     <LoadPanel />
     ...
  );
  }

Answer 1

The code seems to be incorrect!

 document.addEventListener("click", function(e) {

What does this line of code do at the first line of the component?