CODEWITHSUNDEEP
javascriptreact-nativeexporeact-native-render-html
Shoubhik Raj
Shoubhik Raj

Reputation: 151

Error RN :Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate

I'm getting data from WordPress API and showing it in react native application. Getting this error only after adding component even I'm trying to parse a simple paragraph. This is my code -

import React from "react";
import {
  ActivityIndicator,
  Text,
  View,
  ScrollView,
  Image,
  Dimensions,
} from "react-native";
import HTML from "react-native-render-html";
import globalStyles from "../constant/globalStyle";
import axios from "axios";
import moment from "moment";
import { Colors } from "../constant/colors";

class PostDetail extends React.Component {
  state = {
    title: "Loading",
    imageUrl: "https://source.unsplash.com/random",
    content: "Loading",
    date: new Date().toString,
    loaded: false,
  };

  componentDidMount = async () => {
    console.log("FETCHING");

    const req = await axios.get(
      `https://bachrasouthpanchayat.in/wp-json/wp/v2/posts/${this.props.route.params.postId}?embed=true`
    );
    const response = req.data;

    console.log("UPDATING STATE");
    this.setState({
      title: response.title.rendered,
      date: response.date,
      content: response.content.rendered,
      loaded: true,
    });
    console.log("STATE UPDATEDDDDDD");
  };

  render() {
    return (
      <ScrollView
        style={{
          ...globalStyles.container,
          backgroundColor: Colors.BACKGROUND_SCREEN,
        }}
      >
        {this.state.loaded ? (
          <>
            {this.state.imageUrl ? (
              <Image
                style={{
                  width: "100%",
                  height: 250,
                }}
                source={{ uri: this.state.imageUrl }}
                resizeMode="cover"
              />
            ) : null}
            <Text style={globalStyles.primaryHeading}>{this.state.title}</Text>
            <View style={{ paddingHorizontal: 18 }}>
              <Text
                style={{
                  ...globalStyles.date,
                  fontSize: 20,
                  fontWeight: "700",
                }}
              >
                {moment(this.state.date).format("LL")}
              </Text>
              <HTML
                source={{ html: "<p>Hello World</p>" }}
                contentWidth={parseInt(Dimensions.get("window"))}
              />
            </View>
          </>
        ) : (
          <View
            style={{
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <ActivityIndicator size={60} color={Colors.PRIMARY_GREEN} />
          </View>
        )}
      </ScrollView>
    );
  }
}

export default PostDetail;

I want to use react-native-render-html package to render post content from wordpress but don't know why it's not rendering even a simple

tag :|

Upvotes: 1

Views: 333

Answers (0)

Related Questions