Alright I’ve been puzzling over a mysterious error for a few hours now and hardly made any headway in diagnosing the source. I’ve checked stackOverflow and other fCC forum posts but not found anything related to it at all.
This is for a project I’m working on that isn’t for a certification but it does use only stuff fCC has taught me, but if it’s inappropriate to ask about non-curriculum questions just let me know and I will take it down immediately.
I’m trying to create a tasklist and so far I’ve created a feature that allows me to add a task which works fine, but now I’m trying to create a feature that allows me to click on tasks to cross them out. When I try to run the onClick event, the whole program crashes and it gives me an error that says
“Uncaught Invariant Violation: Objects are not valid as a React child (found: [object HTMLLIElement]). If you meant to render a collection of children, use an array instead.”
I’m not trying to render an object though, I’m just trying to change the task’s location in the redux store.
The code that is causing the problem is the onClick within the
- tag in this block.
<ul id = 'currentTasks'>
this.props.tasks.map( (task, idx) => {
return (
<li onClick = {this.completeHandler} key={idx}>{task}</li>
)
})
}
</ul>
The handler it’s referencing is just
completeHandler(event) {
this.props.completeTask(event.target
Which references this block in my redux store
const compTask = (task) => {
return {
type: COMP,
task: task
}
}
Also I don’t know if the problem is here but here is my two piece of mapToProps code, I’ve seen problems where the error was there
const mapStateToProps = (state) => {
return {
tasks: state[0],
compTasks: state[1]
}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewTask: (nTask) => {
dispatch(addTask(nTask))
},
completeTask: (cTask) => {
dispatch(compTask(cTask))
}
}
};
and here is my redux store, just in case the problem is in how I’m storing tasks
const taskReducer = (state = [[],[]], action) => {
switch(action.type) {
case ADD:
return [state[0].concat(action.task), [...state[1]]];
case COMP:
let idx = state[0].indexOf(action.task);
let beg = state.slice(0, idx);
let end = state.slice(idx + 1);
let newState = [[...beg, ...end], [...state[1], action.task]];
return newState;
default:
return state;
}
}
The whole app is live at https://jeengland.github.io/molehills/ in case you wanted to see the problem and error live.
I’m really pretty stumped about this one, sorry if I provided too much or too little code. Thanks in advance for any help.