Error: Text strings must be rendered within a component, occurs in android but works fine on web

Question

My code is working fine on web browser. But when I run it on the cell phone, it shows the error as shown in image. The error is pointed towards the div tags. Got stuck on the error for couple of hours. Also wrapped the div tags with and but none working for me. Any help would be highly appreciated. Here is the code:

import React, { Component } from 'react';
import paginate from 'paginate-array';
import { View,Text,TouchableOpacity,StyleSheet,FlatList,Platform,ActivityIndicator} from 'react-native';

class TodoList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      todos: [],
      size: 5,
      page: 1,
      currPage: null
    }

    this.previousPage = this.previousPage.bind(this);
    this.nextPage = this.nextPage.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    fetch(`https://jsonplaceholder.typicode.com/todos`)
      .then(response => response.json())
      .then(todos => {
        const { page, size } = this.state;

        const currPage = paginate(todos, page, size);

        this.setState({
          ...this.state,
          todos,
          currPage
        });
      });
  }

  previousPage() {
    const { currPage, page, size, todos } = this.state;

    if (page > 1) {
      const newPage = page - 1;
      const newCurrPage = paginate(todos, newPage, size);

      this.setState({
        ...this.state,
        page: newPage,
        currPage: newCurrPage
      });
    }
  }

  nextPage() {
    const { currPage, page, size, todos } = this.state;

    if (page < currPage.totalPages) {
      const newPage = page + 1;
      const newCurrPage = paginate(todos, newPage, size);
      this.setState({ ...this.state, page: newPage, currPage: newCurrPage });
    }
  }

  handleChange(e) {
    const { value } = e.target;
    const { todos, page } = this.state;

    const newSize = +value;
    const newPage = 1;
    const newCurrPage = paginate(todos, newPage, newSize);

    this.setState({
      ...this.state,
      size: newSize,
      page: newPage,
      currPage: newCurrPage
    });
  }

  render() {
    const { page, size, currPage } = this.state;

    return (
      <div> 
          <div>page: {page}</div>
          <div>size: {size}</div>
        <div>
          <label for="size">Size</label>
          <select name="size" id="size" onChange={this.handleChange}>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="25">25</option>
          </select>
        </div>
        {currPage &&
          <ul>
            {currPage.data.map(todo => <li key={todo.id}>{todo.title}</li>)}
          </ul>
        }
        <button onClick={this.previousPage}>Previous Page</button>
        <button onClick={this.nextPage}>Next Page</button>
      </div>
    )
  }
}

export default TodoList;

Got it thanks. How can I find a best example for learning infinite list in react native and simple pagination in react native? — STBox, Jul 23 '20 at 09:22
You should look at the flatlist component https://reactnative.dev/docs/flatlist — Guruparan Giritharan, Jul 23 '20 at 09:35
I am already familiar with it but I want an infinite flatlist. — STBox, Jul 23 '20 at 09:36
have a look at this question https://stackoverflow.com/questions/46385433/react-native-infinite-scroll-with-flatlist — Guruparan Giritharan, Jul 23 '20 at 09:38
My issue was resolved by the link provided by you. Anyhow, can I have a react-native pagination with axios link as well? — STBox, Jul 23 '20 at 13:23
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/218442/discussion-between-stbox-and-guruparan-giritharan). — STBox, Jul 23 '20 at 13:59

score 1 · Accepted Answer · answered Jul 23 '20 at 10:38

What I came to know is you want an infinite list, and also you are going towards wrong direction. You are using react instead of react-native. Try using this:

import React, {Component} from 'react';
import {View, Text, FlatList, Image} from 'react-native';
import {Card} from 'react-native-elements';
import axios from 'axios';

class Users extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      page: 1,
      error: null,
    };
  }
  componentDidMount() {
    this.fetchUsers(this.state.page);
  }

  fetchMoreUsers = () => {
    this.setState(
      prevState => ({
        page: prevState.page + 100,
      }),
      () => {
        this.fetchUsers();
      },
    );
  };

  fetchUsers = () => {
    const {page} = this.state;
    axios
      .get(`https://api.github.com/users?since=${page}&per_page=10`)
      .then(response => {
        this.setState({
          users: this.state.users.concat(response.data),
        });
      })
      .catch(error => {
        this.setState({error: error});
      });
  };

  render() {
    return (
      <FlatList
        contentContainerStyle={{
          backgroundColor: '#FBFBF8',
          alignItems: 'center',
          justifyContent: 'center',
          marginTop: 15,
        }}
        data={this.state.users}
        keyExtractor={user => user.id.toString()}
        onEndReached={this.fetchMoreUsers}
        onEndReachedThreshold={0.5}
        initialNumToRender={10}
        renderItem={({item}) => (
          <View
            style={{
              marginTop: 10,
            }}>
            <Card>
              <Image
                style={{width: 200, height: 100}}
                source={{uri: item.avatar_url}}
              />
              <Text>{item.login}</Text>
            </Card>
          </View>
        )}
      />
    );
  }
}
export default Users;

Error: Text strings must be rendered within a component, occurs in android but works fine on web

1 Answers1