this.props.todos.map is not a function

[muneermuhammed]

I am getting an error from start.js line 43:29. Could you please help me here

[dapx]

Of course, Can you pass me the complete error?

I am checking the code and simulating but this error doesn't occur.
The problem is that this.props.todos may be undefined and then the .map() function doesn't exists.
I think that we can put a line to get the type of this.props.todos, like example below:

console.log(this.props.todos.constructor.name)

It can help us.

[muneermuhammed]

This is my code,
`import React, { Component } from 'react';
import {
StyleSheet,
Text,
ScrollView,
ListView,
View,
TextInput
} from 'react-native';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/index';
let nextTodoId = 0;

class App extends Component {

constructor(props){
super(props);
this.state = {
text: ''
}
}

getTodos(text){
this.props.dispatch(actionCreators.addTodo(text));
}

toggleTodo(id){
this.props.dispatch(actionCreators.toggleTodo(id));
}

render() {
console.log(JSON.stringify(this.props.todos.constructor.name))
return (

<TextInput
placeholder={'ADD TODO HERE'}
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<Text onPress={() => this.getTodos(this.state.text)}>
Add Todo

{ this.props.todos.map((todo) => {
return (
<Text
key={todo.id}
style={{ textDecorationLine: todo.completed ? 'line-through' : 'none' }}
onPress={() => this.toggleTodo(todo.id)}>
{todo.text}

);
})
}

);
}
}
function mapStateToProps(state) {
return { todos: state.todos };
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export default connect(mapStateToProps)(App);`

when I consoled this.props.todos.constructor.name,it returned a string object,
when I consoled this.props ,it returned {"todos":{"past":[],"present":[],"future":[],"history":{"past":[],"present":[],"future":[]}}}
error is this.props.todos.map is not a function,ExceptionsManager.js:63

[dapx]

I thinked that my project there is the error, but no problem, I will help you.

For me your code have some problems.

The first problem is that you need close tags.

Example:

<Text onPress={() => this.getTodos(this.state.text)}>
Add Todo
</Text>

The second is that you need return the JSX wrapped with a <View> or other similar component.

Example:

render(){
  return (
    <View>
     <Text onPress={() => this.getTodos(this.state.text)}>
        Add Todo
     </Text>
     <Text onPress={() => this.removeTodos(this.state.text)}>
        remove Todo
     </Text>
   <View>
  );
}

Solving these problems, I was able to run your code, and with the command:
react-native log-android

I got to see the console.log message:
03-09 12:59:59.359 2370 2494 I ReactNativeJS: "Array"

In my case I replaced this line: import * as actionCreators from '../actions/index';
And I used my project actions: import * as actionCreators from '../redux/action-creators/index';

I think you should create a fork so I can see all files and help you better.

[dapx]

I think that your action are returning a object instead of a array, you may be using just the function todo instead of function todosReducer.

Commit and post your code in a fork for me.

Thanks