Search code examples
reactjs

Props are passed but I can't access them

So in the Inspect tool I can see the props coming in just fine, but when i try to console log them i get empty arrays.

export default class UpcomingBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      uptasks: this.props.uptasks,
      uptaskdate: this.props.uptaskdate,

      taskentries: [],
    };

    this.combineTaskInfo = this.combineTaskInfo.bind(this);
  }

  combineTaskInfo() {
    const task = this.state.uptasks.map((task) => {
      return task;
    });
    const taskdate = this.props.uptaskdate;
    // const entry = if (task.id === taskdate.task_id) {
    //   this.setState({
    //     taskentries: [{
    //       task: task.task,
    //       lastcompleted: taskdate.lastcompleted,
    //       help: task.instructions,
    //     }].concat(this.state.taskentries),
    //   });
    // }
    console.log(
      "task",
      task,
      "task dates",
      taskdate,
      "task prop",
      this.state.uptasks,
      "taskdate props",
      this.state.uptaskdate
    );
  }


`> {
>   "uptasks": [
>     {
>       "id": 4,
>       "instructions": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArcAAAuECAIAAAAHicDwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhe7N15m1VVlif+dEAcAVERxAkQFOdZM9PMrKysrHxq7O7q7uo/+s3ky+gX0FU9VtVT/cvKyszKOZ1RFBEQlRkEQRFxFoff55zvieM14kZwYyBAXF/1eO4+a6+91tpr2jci7j3n888//0ahUCgUCoXCBJzb/b9QKBQKhULhy6guoVAoFAqFwnBUl1AoFAqFQmE4qksoFAqFQqEwHNUlFAqFQqFQGI7qEgqFQqFQKAxHdQmFQqFQKBSGo7qEQqFQKBQKw1FdQqFQKBQKheGoLqFQKBQKhcJwVJdQKBQKhUJhOKpLKBQKhUKhMBzVJRQKhUKhUBiO6hIKhUKhUCgMR3UJhUKhUCgUhqO6hE...",
>       "task": "pull strings from conveyor beaerings"
>     }
>   ],
>   "uptaskdate": [
>     {
>       "lastcompleted": "2024-04-30",
>       "nextdue": "2024-06-19",
>       "specs_sn": 101010,
>       "task_id": 4
>     }
>   ]
> }`

I've tried using the this.props, I've put them into state and tried this.state, the main goal is to map them but it isn't reading the props info.

inspect

Solution

  • so it looks like the function was trying to run first. Had to set it inside the function that should run before it , at the end. So i had to go back one component in the tree, then put my combine function call into the function that is called right before.

    getOverTaskInfo() {
const odtaskid = this.state.overdue.map((record) => {
  return record.task_id;
});
const odtaskrec = odtaskid.forEach((record) => {
  axios.get(`http://127.0.0.1:5000/Task/${record}`).then((response) => {
    this.setState(
      {
        finaloverdue: [response.data].concat(this.state.finaloverdue),
      },
      () => {
        this.combineOverTaskInfo();
      }
    );
  });
});

    }

    this way it will run after the props i was looking for showed up in state for the function to use.