TypeError in React Native

Question

I'm following a basic YouTube tutorial and following along I'm getting an error:

'TypeError: Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.'

I've checked multiple questions and answers, but I still can't get my head around why it's not working or an alternative solution.

export default function App() {

const [task, setTask] = useState();
const [taskItems, setTaskItems] = useState([]);

const handleAddTask = () => {
setTaskItems([...setTaskItems, task])
// console.log(task)
setTask(null)
}

return (
<View style={styles.container}>
  <View style={styles.tasksWrapper}>
    <Text style={styles.sectionTitle}>Today's Tasks</Text>
  

  <View style={styles.items}>
    {
      taskItems.map((item, index) => {
        return (
          <TouchableOpacity key={index}  onPress={() => handleAddTask(index)}>
            <Task text={item} /> 
          </TouchableOpacity>
        )
      })
    }
  </View>
  </View>

  <KeyboardAvoidingView 
    behavior={Platform.OS === "ios" ? "padding" : "height"}
    style={styles.writeTaskWrapper}
    >
      <TextInput style={styles.input} placeholder={'Write a task here'} value={task} onChangeText={text => setTask(text)} />
      <TouchableOpacity onPress={() => handleAddTask()} >
        <View style={styles.addWrapper}>
          <Text style={styles.addText}>+</Text>
        </View>
      </TouchableOpacity>
    </KeyboardAvoidingView>
</View>
);}

The code I'm getting the error with is

setTaskItems([...setTaskItems, task])

Any help would be really appreciated! Thanks

jean182 · Accepted Answer · 2021-09-21 20:33:23Z

1

You can't spread a function and setTaskItems is a function that sets the state of taskItems. Try doing

setTaskItems([...taskItems, task])

which I think is what you want to accomplish, to add the task into the existing taskItems array.

answered Sep 21, 2021 at 20:33

jean182

3,5332 gold badges21 silver badges32 bronze badges

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

1 Comment

Frankinstyyn Over a year ago

Ahh, that's it! Thank you so much. The explanation really helped too so thank you for clarifying as well!

Clem · Accepted Answer · 2021-09-21 20:30:15Z

1

setTaskItems([...taskItems, task])

answered Sep 21, 2021 at 20:30

Clem

2,33218 silver badges20 bronze badges

Collectives™ on Stack Overflow

TypeError in React Native

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related