Table components not rendering-CodePudding

So I am creating a work schedule site and am fairly new to react.

I can call the renderEmployeeRota function from inside the main render JSX, and what it returns is rendered onto the site. However, anything I try to render from the RotaEntry component is completely ignored.

I cannot figure out why the component isn't being rendered, if anyone can help it would be greatly appreciated.

export default class RotaEntry extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    <td>This isn't being rendered?</td>
  }
}

renderEmployeeRota() {
    return this.state.employees.map((employee) => {
      return (
        <tr>
          <td>{employee.employee_id}</td>
          <td>{employee.employee_name}</td>
          <RotaEntry employeeId={employee.employee_id} date={this.state.currentWeek} />
        </tr>
      )
    })
  }

CodePudding user response：

You would have to return a value from your render

export default class RotaEntry extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return <td>This isn't being rendered?</td>
  }


}

Or Better still use a functional component

const Rotary =(props)=> <div>Your Code Here </div>

CodePudding user response：

Based on Reactjs documentation the simplest form of a class based component looks like this:

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

As you can see the render method should return a JSX element. The render method in RotaEntry does not return anything! This is the cause of the problem.