React invariant error: child can't be object

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'> (task, idx) => {
           return (
               <li onClick = {this.completeHandler} key={idx}>{task}</li>

The handler it’s referencing is just

completeHandler(event) {

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) => {
        completeTask: (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;
            return state;

The whole app is live at 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.

Alright I fiddled around with it and remade the entire redux state as an object instead of an array, and that seems to have fixed the problem at hand? Not entirely sure what the problem was in the first place so I don’t really feel like I learned from this except don’t use an array there.

Ah, turned out the problem is that I was using instead of, like I should have been.