Error: A valid React element (or null) must be returned (Checked Return() and Render())

Question

I have been getting the following error after refactoring some code...

PartnersIteration.render(): A valid React element (or null) must be 
returned. You may have returned undefined, an array or some other 
invalid object. 

Everything that I have read so far has told me to look at the syntax of my return and render functions. I have checked it all, I just dont see where the error is coming from! Any chance someone could point it out to me? Thanks!

PS. I have put debuggers in all over the place and have access to all of my declared variables, from state, props or otherwise defined locally in my render() function

render() {
  let newAllPartners = this.props.newAllPartners;
  let dynamicPartnerList = this.state.dynamicPartnerList;
  let count = this.state.count;
  let lastLetter = this.props.lastLetter;
  let firstLetter;
  let randomNumber;

if(newAllPartners != null && newAllPartners != undefined && (Object.keys(newAllPartners).length != 0)){
  dynamicPartnerList.map(function(object) {
    randomNumber = Math.floor(Math.random() * (300-10000 + 1) + 1000);

    if(object.name != undefined) {
      firstLetter = object.name.charAt(0);

      if(firstLetter === lastLetter) {
        firstLetter = '';
        showImage(object.id, object.urlPicture);

        return(
          <tbody>
            <tr className="row clickable" key={object.id} onClick={() => this.rowClick(object.id)}>
              <td>
                <table>
                  <tbody>
                    <tr className="row">
                      <td className="child col s4 m3 l2">
                        <img id={object.id}  height="56px" />
                      </td>
                      <td className="col s8 m9 l10">
                        <table>
                          <tbody>
                            <tr>
                              <td className="columnwithTitleSubtile">
                                <p className="producerName">{object.name}</p>
                                <p className="subtitle">{object.countSIF} {<FormattedMessage id="navbar.slaughterhouses"/>}</p>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
          </tbody>
        )
      }

      else {
      lastLetter = firstLetter;
      return(
        <tbody>
          <tr key={randomNumber}>
            <td className="firstLetter">{firstLetter}</td>
          </tr>
        </tbody>
        )
      }
    }

    else {
      return(
        <tbody>
          <tr>
            <td>
              {<FormattedMessage id="msgempty.default"/>}
            </td>
          </tr>
        </tbody>
      )
    }
  })
}

}

Answer 1

You have 3 if statements and only 2 else 's. this means not all condition blocks returns a valid react object.
It seems like the first if condition lacks an else block, so i added one for you to check:

if (newAllPartners != null && newAllPartners != undefined && (Object.keys(newAllPartners).length != 0)) {
    dynamicPartnerList.map(function (object) {
        randomNumber = Math.floor(Math.random() * (300 - 10000 + 1) + 1000);

        if (object.name != undefined) {
            firstLetter = object.name.charAt(0);

            if (firstLetter === lastLetter) {
                firstLetter = '';
                showImage(object.id, object.urlPicture);

                return (
                    <tbody>
                        <tr className="row clickable" key={object.id} onClick={() => this.rowClick(object.id)}>
                            <td>
                                <table>
                                    <tbody>
                                        <tr className="row">
                                            <td className="child col s4 m3 l2">
                                                <img id={object.id} height="56px" />
                                            </td>
                                            <td className="col s8 m9 l10">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td className="columnwithTitleSubtile">
                                                                <p className="producerName">{object.name}</p>
                                                                <p className="subtitle">{object.countSIF} {<FormattedMessage id="navbar.slaughterhouses" />}</p>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                )
            }

            else {
                lastLetter = firstLetter;
                return (
                    <tbody>
                        <tr key={randomNumber}>
                            <td className="firstLetter">{firstLetter}</td>
                        </tr>
                    </tbody>
                )
            }
        }

        else {
            return (
                <tbody>
                    <tr>
                        <td>
                            {<FormattedMessage id="msgempty.default" />}
                        </td>
                    </tr>
                </tbody>
            )
        }
    })
} 
else{ // this was missing
    return <tbody></tbody>
}

Answer 2

Check you all else..if statements and the main problem - you don't return anything in render . You have returns in map , but you need to return your map too:

return <div>{dynamicPartnerList.map(function (object) {...})} </div>