Why isn't the Todo class rendering - react-native

Question

I have the following script. It's not quite there yet but I'm stuck on getting the class to render
Here's where I think I'm messing up:
{this.state.todos.map(todo=>{
<Todo
onToggle={()=>(this.toggle(todo.id))}
onDelete={()=>(this.removeTodo(todo.id))}
todo={todo}
key={todo.id}
/>})}
and here's the entire code:
import React from 'react';
import { TextInput,Button, StyleSheet, View,Text, ScrollView } from 'react-native';
import {Constants} from 'expo'
let id=0
{/* const Todo = (props) => (
<Text>
{/* <input type='checkbox'
checked={props.todo.checked}
onClick={props.onToggle}
/>
<Button title='delete' button onPress={props.onDelete}></Button>
<Text>{props.todo.text}</Text>
</Text>
) */}
class Todo extends React.Component{
shouldComponentUpdate(nextProps,nextState){
return true
}
render(){
console.log('inside')
return(
<Text>
<Button title='delete' button onPress={props.onDelete}></Button>
<Text>{props.todo.text}</Text>
</Text>
)
}}
export default class App extends React.Component {
constructor(){
super()
this.state={
todos:[],
inputText:'',
update:false
}
}
clearText(){
this.setState({inputText:''})
this.setState({update:true})
}
addTodo(text){
this.setState({update:false})
this.setState({todos: [...this.state.todos,
{ id:id++,
text: text,
checked:false
}
]
})
this.setState({inputText:text})
}
toggle(id){
this.setState({todos: this.state.todos.map(todo=>{
if(id!==todo.id)return todo
return{
id:todo.id,
text:todo.text,
checked: !todo.checked}})})
}
removeTodo(id){
this.setState({todos: this.state.todos.filter(todo=>(todo.id!==id))})
}
render(){
return(
<View style={styles.container}>
<Text >Count of Todos: {this.state.todos.length}</Text>
<Text >{"Todo's checked:"}
{this.state.todos.filter(todo =>(todo.checked===true)).length}</Text>
<TextInput
style={{height:25,borderColor:'red',borderWidth:1,textAlign:'center'}}
value={this.state.inputText}
placeholder={'add Todo'}
onSubmitEditing={()=>{this.clearText()}}
onChangeText={(text) => {this.addTodo(text)}}
/>
<ScrollView>
{this.state.todos.map(todo=>{
<Todo
onToggle={()=>(this.toggle(todo.id))}
onDelete={()=>(this.removeTodo(todo.id))}
todo={todo}
key={todo.id}
/>})}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
flexDirection:'column',
height:50,
paddingTop:3*Constants.statusBarHeight,
}
})

Answer 1

You need to return the data from the map in order to render it.
{this.state.todos.map(todo=> (
<Todo
onToggle={()=>(this.toggle(todo.id))}
onDelete={()=>(this.removeTodo(todo.id))}
todo={todo}
key={todo.id}
/>))}
=> {} returns undefined since it is an explicit block, you need to return an implicit block

Answer 2

Here is working code. I modified your code to run on my pc.
import React from 'react';
import {TextInput, Button, StyleSheet, View, Text, ScrollView} from 'react-native';
//import {Constants} from 'expo'
let id = 0
{/* const Todo = (props) => (
<Text>
{/* <input type='checkbox'
checked={props.todo.checked}
onClick={props.onToggle}
/>
<Button title='delete' button onPress={props.onDelete}></Button>
<Text>{props.todo.text}</Text>
</Text>
) */}
class Todo extends React.Component {
shouldComponentUpdate (nextProps, nextState) {
return true
}
render () {
console.log('inside')
return (
<Text>
<Button title='delete' onPress={this.props.onDelete}></Button>
<Text>{this.props.todo.text}</Text>
</Text>
)
}
}
export default class App extends React.Component {
constructor () {
super()
this.state = {
todos: [],
inputText: '',
update: false
}
}
clearText () {
this.setState({inputText: ''})
this.setState({update: true})
}
addTodo (text) {
this.setState({update: false})
this.setState({
todos: [...this.state.todos,
{
id: id++,
text: text,
checked: false
}
]
})
this.setState({inputText: text})
}
toggle (id) {
this.setState({
todos: this.state.todos.map(todo => {
if (id !== todo.id) return todo
return {
id: todo.id,
text: todo.text,
checked: !todo.checked
}
})
})
}
removeTodo (id) {
this.setState({todos: this.state.todos.filter(todo => (todo.id !== id))})
}
render () {
return (
<View style={styles.container}>
<Text >Count of Todos: {this.state.todos.length}</Text>
<Text >{"Todo's checked:"}
{this.state.todos.filter(todo => (todo.checked === true)).length}</Text>
<TextInput
style={{height: 25, borderColor: 'red', borderWidth: 1, textAlign: 'center'}}
value={this.state.inputText}
placeholder={'add Todo'}
onSubmitEditing={() => {this.clearText()}}
onChangeText={(text) => {this.addTodo(text)}}
/>
<ScrollView>
{this.state.todos.map(todo =>
<Todo
onToggle={() => (this.toggle(todo.id))}
onDelete={() => (this.removeTodo(todo.id))}
todo={todo}
key={todo.id}
/>
)}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
height: 50,
//paddingTop:3*Constants.statusBarHeight,
paddingTop: 3 * 10,
}
})