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.
2
Answers
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.
It could be related to data being referenced!
What is happening to the following data after they are passed to
UpcomingBar
component?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.These is only thing I can think of from what has been given in your question.