const [usersOfTeam1, setUsersOfTeam1] = useState([])
const [usersOfTeam2, setUsersOfTeam2] = useState([])

socket.on("update users", ({ users, team1, team2 }) => { // receives the teams information from the server
    setUsersOfTeam1(team1)
    setUsersOfTeam2(team2)
    setUsersInTheRoom(users)
})


function Users(team) {
    if (team === 1) {
        if (usersOfTeam1.length === 0) {
            return (<Text>(Empty)</Text>)
        }
        else {
            return (<FlatList
                data={usersOfTeam1}
                renderItem={({ item }) => (
                    <Text>{item.username}</Text>
                )}
            />)
        }
    }
    else if (team === 2) {
        if (usersOfTeam2.length === 0) {
            return (<Text>(Empty)</Text>)
        }
        else {
            return (<FlatList
                data={usersOfTeam2}
                renderItem={({ item }) => (
                    <Text>{item.username}</Text>
                )}
            />)
        }
    }

I am making a small game and want to display the people in the each team before selecting teams in a room. If the user just created the room, the teams will be empty naturally. I want to make a conditional rendering according to this situation. I get the data from a socket.io connection from another component (I don't think it is very important but just saying.)

And the general return state is like this:

return (

    <ImageBackground source={image} resizeMode="cover" style={styles.backgroundContainer}>

        <View style={styles.teamsContainer}>

            <View style={styles.team}>
                <View style={styles.userList}>
                    <Text style={styles.teamsTexts}>TEAM 1</Text>
                    <Users team={1} />
                </View>

                <View style={styles.joinInteractive}>
                    <TouchableOpacity
                        onPress={() => {
                            socket.emit("team selected", { team: 1 })
                            navigation.navigate("Game")
                        }}>
                        <Text style={{ fontFamily: "Abel", fontSize: 30 }}>Join</Text>
                    </TouchableOpacity>
                </View>
            </View>

            <View style={styles.team}>
                <View style={styles.userList}>
                    <Text style={styles.teamsTexts}>TEAM 2</Text>
                    <Users team={2} />
                </View>

                <View style={styles.joinInteractive}>
                    <TouchableOpacity
                        onPress={() => {
                            socket.emit("team selected", { team: 2 })
                            navigation.navigate("Game")
                        }}>

                        <Text style={{ fontFamily: "Abel", fontSize: 30 }}>Join</Text>
                    </TouchableOpacity>
                </View>
            </View>

        </View>
    </ImageBackground>
);

However, when I try to run the application, I get the following error:

Users(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Thank you.

CodePudding user response：

The problem is probably because you dont tell the function to return anything if team is neither 1 or 2.

if (team === 1) { // First condition
        if (usersOfTeam1.length === 0) {
            return (<Text>(Empty)</Text>)
        }
        else {
            return (<FlatList
                data={usersOfTeam1}
                renderItem={({ item }) => (
                    <Text>{item.username}</Text>
                )}
            />)
        }
    }
    else if (team === 2) { // Second condition
        if (usersOfTeam2.length === 0) {
            return (<Text>(Empty)</Text>)
        }
        else {
            return (<FlatList
                data={usersOfTeam2}
                renderItem={({ item }) => (
                    <Text>{item.username}</Text>
                )}
            />)
        }
    // HERE --- What is the return statement if both conditions fail to meet the requirements?