Reactjs Question posted in
The new location for the React Documentation can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    It could be related to data being referenced!

    What is happening to the following data after they are passed to UpcomingBar component?

    {
    "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
        }
    ]
}

    Because if you are clearing these two data after passing them as props to the UpcomingBar component then the props will also likely change. This is due to objects and array in Javascript are of reference type. If this is your problem then you can pass props with a spread operator to dereference them like so.

    <UpcomingBar dataToPass={{ ...data }} />

    These is only thing I can think of from what has been given in your question.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search