CODEWITHSUNDEEP
javascriptreactjs
jonas
jonas

Reputation: 122

react component is not getting called at all from render function

I am making a website with react, but some component doesn't show up. Im logging once in the render function and once in the component before the return. The log in the render function shows up but the one in the component doesn't. And there is no error in the console.

the component:

import React from "react";
import TaskColumnRowCon from "./taskColumnRowCon";

export default function TaskClumnDays({ title, object }) {
  console.log("showing component");
  return (
    <div className="Task-Column" style={{ margin: "10px" }}>
      <div
        style={{
          marginBottom: "10px",
          display: "flex",
          justifyContent: "space-evenly",
        }}
      >
        <div style={{ fontSize: "20px" }}>DAY </div>
        <div style={{ fontSize: "20px" }}>date</div>
      </div>

      <div>
        <TaskColumnRowCon />
      </div>
    </div>
  );
}

the render function:

render() {
    console.log("redering component");
    return this.state.dates.map((date) => {
      <TaskClumnDays key={date} title={date} object={this.state.tasks[date]} />;
    });
  }

Upvotes: 1

Views: 146

Answers (1)

Pandaiolo
Pandaiolo

Reputation: 11586

You are not returning anything from the map function

Try:

render() {
    console.log("redering component");
    return this.state.dates.map((date) => 
      <TaskClumnDays key={date} title={date} object={this.state.tasks[date]} />
    );
  }

(I removed the brackets)

Upvotes: 2

Related Questions