React-Native "expected a component class, got object Object" - reactjs

Question

I have a big code that does not run because of the error in the headline.
This is one file of my code, can anyone see what is wrong? I believe it is the line "{this.state.todos.map((todo,index) =>" (code line 62)
I have capitalised the name of the objects, so that is not the issue (I think).
npm -v 4.6.1
import React, { Component } from 'react';
//import $ from 'jquery';
import { Button, View, FormGroup, FormControl, ControlLabel } from 'react-native';
import { Text } from 'react-native-svg'
/* generating sample data to be shown, these data names are used to access the values*/
var todos = [];
//Will not work first time, since list do not exist in AsyncStorage.
//Get from AsyncStorage.
try{
todos = JSON.parse(AsyncStorage["todos"]);
}catch(ex){
console.log("Not working" + ex);
todos = [];
}
//Errormessage for errorhandeling.
var errorMessage = "";
/*--------------------*/
class Todos extends Component {
constructor(props) {
super(props);
this.state = {
todos
};
this.handleAddTodo = this.handleAddTodo.bind(this);
}
handleAddTodo(todo) {
/* creates todo in list that shows*/
this.setState({todos: [...this.state.todos, todo]});
/*this code saves in AsyncStorage*/
todos.push(todo);
//AsyncStorage...
AsyncStorage.setItem("todos", JSON.stringify(todos));
}
/* function that removes todos from the list*/
handleRemoveTodo(index) {
this.setState({
todos: this.state.todos.filter(function(e, i) {
return i !== index;
})
})
/* now working as expected*/
todos.splice(index, 1);
AsyncStorage.setItem("todos", JSON.stringify(todos));
}
render() {
return (
<View>
<TodosInput onAddTodo={this.handleAddTodo} />
<hr />
<Text>todo count: <span>{this.state.todos.length}</span></Text>
<View>
<View>{this.state.todos.map((todo,index) =>
<View key={index}>
<Text style={style.list-group-item-heading}>{todo.todoTitle}<small><span style={style.label} label-info></span></small> </Text>
<View>{todo.todoDesc}</View>
<Button bsStyle="danger" onClick={this.handleRemoveTodo.bind(this, index)}><span style={style.glyphicon} glyphicon-trash></span></Button>
</View>
)}</View>
</View>
</View>
);
}

Answer 1

It is more likely because of using html tags instead of native components.
Like hr span and small.
So you need to create your own components and also titlecase their names.
Here is possible example how to fix your problem:
const Small = ({ children }) => (
<Text
style={{
fontSize: 10
}}
>
{children}
</Text>
);
const HR = () => (
<View
style={{
height: 1,
borderBottomColor: "black",
borderBottomWidth: 1
}}
/>
);
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View>
<Text>This is span</Text>
</View>
<View>
<Text>
Regular test <Small>With {"<small>"} text</Small> Inside
</Text>
</View>
<View>
<Text>This is {"<HR />"} bellow</Text>
<HR />
</View>
</View>
);
}
}
UPD: Actually there are a lot of other bugs in a code above
Quick list of possible issues:
as pointed dalready - replace all html tags with native components
style={style.list-group-item-heading} You cannot use dash separator in js except ni a strings - possible fix: style={style['list-group-item-heading']}
<View>{todo.todoDesc}</View> - you have to wrao text with Text compnent
<Button /> component have required prop title it should be a string, as well as it dosn't have OnClick handler but requires OnPress
To summarize - i would note that react native uses jsx but it is not html. It have its own API and you'll have to grasp it carefully.