Add array into object with push

Question

I'm practicing developing an app with react native. A simple toDo app. The problem is that I can't add tasks with an id as I get this error => Objects are not valid as a React child (found: object with keys {taskName, taskId}). If you want to render a collection of children, use an array instead. I don't understand what I'm doing wrong, if the constant taskToDo is equal to an object it tells me that taskToDo is not a function.

Probably or almost certainly the logic is not the most adequate, I also listen to suggestions.

This is my reduer

const initialState = {
    tasks: []
}


export const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "ADD_TASK":
            return { ...state, tasks: [...state.tasks, action.payload] };
        case "COMPLETE_TASK":
            return {
                tasks: state.tasks.filter((task) => task !== action.payload)
            }

        default:
            return state
    }
}

Here the function

    const dispatch = useDispatch()
    const [taskName, setTaskName] = useState();
    const tasks = useSelector(state => state.tasks)

    const handleAddTask = () => {
        const taskToDo = []
        taskToDo.push({
            taskName: taskName,
            taskId: `id-${taskName}`
        })
        dispatch(addTask(taskToDo))
    }

And the button

 <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={styles.writeTaskWraper}
 >

        <TextInput
           placeholder='write a task'
           style={styles.input}
           onChangeText={text => setTaskName(text)}
           value={taskName}
        />

        <TouchableOpacity onPress={() => handleAddTask()}>
           <View style={styles.addWraper}>
              <Text style={styles.addText}>+</Text>
           </View>
        </TouchableOpacity>

 </KeyboardAvoidingView>

THANKS IN ADVANCE

Nooruddin Lakhani · Accepted Answer · 2022-03-22 10:09:15Z

1

You are adding array of taskToDo[] to existing array in reducer. Try this way by adding new object to an array

const handleAddTask = () => {

    const taskToDo = {};

    taskToDo.taskName = taskName;
    taskToDo.taskId = `id-${taskName}`;
        
    dispatch(addTask(taskToDo))
}

answered Mar 22, 2022 at 10:09

Nooruddin Lakhani

6,8513 gold badges22 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Isaac Martí Over a year ago

Same problem Objects are not valid as a React child (found: object with keys {taskName, taskId}). If you meant to render a collection of children, use an array instead.

Nooruddin Lakhani Over a year ago

@IsaacMartí where are you using tasks: [] ? please share code

Isaac Martí Over a year ago

in the reducer inside initialState``` const initialState = { tasks: [] }```

Nooruddin Lakhani Over a year ago

@IsaacMartí No, I mean where are you using? In initialState you are just declaring it to use different areas of screens

Isaac Martí Over a year ago

Here i have the problem... ` { tasks.map((item, index) => { return (<TouchableOpacity onPress={()=> handleCompleteTask(item.taskId)} > <Task text={item.taskName} key={item.taskId} /> </TouchableOpacity> ) })} ` before that i had ` ... <Task text={item} key={item} />... `

Collectives™ on Stack Overflow

Add array into object with push

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related