React method doesn't return table data to display

Question

In React I have a ternary operator returning a component if a condition is met:

              { this.state.houseHoldGroup.length > 0 ? (
              <Table className="align-items-center table-flush" responsive>
                <thead className="thead-light">
                  <tr>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col"></th>
                    <th scope="col"></th>
                  </tr>
                </thead>
                <tbody>
                {this.checkHouseholdGroup()}
                </tbody>
              </Table>
            ) : null }

Works good. Inside this component I have a method: this.checkHouseholdGroup()

The expected behavior is for this method to return the table data inside <tbody></tbody>

checkHouseholdGroup = () => {
  const householdDetails = this.state.houseHoldGroup;
  householdDetails.forEach(el => {
    console.log(el.firstHousehold)
    return (
      <tr>
        <th scope="row">{el.firstHousehold}</th>
        <td>{el.lastHousehold}</td>
        <td>
        <Button
          color="primary"
          href="#pablo"
          onClick={e => e.preventDefault()}
          size="sm"
          onClick={e => this.submitMember(e)}>
          Update
        </Button>
        </td>
        <td>
        <Button
          color="primary"
          href="#pablo"
          onClick={e => e.preventDefault()}
          size="sm"
          onClick={e => this.submitMember(e)}>
          Delete
        </Button>
        </td>
      </tr>
    )
  })
}

I can confirm the element has data. I console.log(el.firstHousehold) can see it's not empty. What am I doing wrong? The expected result would be that it would return my with the data in it.

Answer 1

Replace householdDetails.forEach with return householdDetails.map and you should be good.

forEach is used to create side effects - it does not return anything. The parent component of checkHouseholdGroup waits for a value to be returned, but nothing comes out of the function. Using return inside a forEach call will make the returned values go "nowhere". That's why you need to use map (ir returns a list with the elements), and then return the array.

Answer 2

Have you tried mapping instead of using forEach?

checkHouseholdGroup = () => {
  const householdDetails = this.state.houseHoldGroup;
  return householdDetails.map(el => {
    console.log(el.firstHousehold)
    return (
      <tr>
        <th scope="row">{el.firstHousehold}</th>
        <td>{el.lastHousehold}</td>
        <td>
        <Button
          color="primary"
          href="#pablo"
          onClick={e => e.preventDefault()}
          size="sm"
          onClick={e => this.submitMember(e)}>
          Update
        </Button>
        </td>
        <td>
        <Button
          color="primary"
          href="#pablo"
          onClick={e => e.preventDefault()}
          size="sm"
          onClick={e => this.submitMember(e)}>
          Delete
        </Button>
        </td>
      </tr>
    )
  })
}