display activated activity indicator on current row with react native

Question

Currently working on an app this gives users lists of news on a page and on each news has a textbox where you can input your comment. So for example, 10 news items will have 10 textboxes.

When a user comment after and hit the submit button, the activity indicator appears for all 10 news items, but I want it to only display on where the comment has been made and also after posting the comment, the comment box should be empty

Function

state = {
  posts: [],
  comment: ""
};

commentPost = item => {
  const api = create({
    baseURL: "patch-to-api-url",
    headers: { Accept: "application/json" }
  });
  const self = this;
  self.setState({ modalLoader: true });
  api
    .post("news/posts/" + `${item.id}` + "/comments", {
      media: "",
      text: this.state.comment
    })
    .then(response => {
      console.log(response);
      self.setState({ modalLoader: false });

      //updating the state
      this.setState(prevState => ({
        posts: prevState.posts.map(el => {
          if (el.id === item.id) {
            return {
              ...el,
              commentsCount: el.commentsCount + 1
            };
          }
          return el;
        })
      }));
    });
};

View

<ScrollView>
  {posts.map((item, i) => {
    return (
      <View key={i} style={styles.user}>
        <Card>
          <ListItem
            titleStyle={{ color: "#36c", fontWeight: "500" }}
            onPress={() =>
              navigation.navigate("PostComments", {
                postID: item.id,
                groupID: item.writer.group.id,
                communityID: item.group.community.id
              })
            }
            titleNumberOfLines={2}
            hideChevron={false}
            chevronColor="#36c"
            roundAvatar
            title={item.headline}
            avatar={{
              uri:
                "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"
            }}
          />
          <Text
            style={{
              marginBottom: 10,
              fontSize: 16,
              color: "#000",
              fontFamily: "HelveticaNeue-Light"
            }}
          >
            {item.text}
          </Text>
          <TextInput
            onChangeText={onSetComment}
            label="Write Comment"
            underlineColor="#36a"
            style={{ backgroundColor: "#fff", width: "90%" }}
          />

          <View>
            <Icon
              name="md-send"
              type="ionicon"
              color="#999"
              onPress={() => {
                onCommentPost(item);
              }}
            />

            <View style={styles.loading}>
              <ActivityIndicator animating={modalLoader} size="small" />
            </View>
          </View>
        </Card>
      </View>
    );
  })}
</ScrollView>

Answer 1

You are sharing the modalLoader state among all iterated posts. A Post should be a single stateful component. Then for the specific component that was updated you need to update only that state.

Answer 2

You don't have enough state to accomplish what you want. Wanting an independent spinner in each post implies that you have to store it's state somewhere.

You should add the modalLoader attribute to each post and not globally. Change your function to look like this:

commentPost = item => {
  const api = create({
    baseURL: "patch-to-api-url",
    headers: { Accept: "application/json" }
  });
  const self = this;
  self.setState({ posts: this.state.posts.map(post => post.id === item.id ? {...post, modalLoader: true } : post));
  api
    .post("news/posts/" + `${item.id}` + "/comments", {
      media: "",
      text: this.state.comment
    })
    .then(response => {
      console.log(response);
      self.setState({ posts: this.state.posts.map(post => post.id === item.id ? {...post, modalLoader: false } : post));

      //updating the state
      this.setState(prevState => ({
        posts: prevState.posts.map(el => {
          if (el.id === item.id) {
            return {
              ...el,
              commentsCount: el.commentsCount + 1
            };
          }
          return el;
        })
      }));
    });
};

And your component to look like this:

<ScrollView>
  {posts.map((item, i) => {
    return (
      <View key={i} style={styles.user}>
        <Card>
          <ListItem
            titleStyle={{ color: "#36c", fontWeight: "500" }}
            onPress={() =>
              navigation.navigate("PostComments", {
                postID: item.id,
                groupID: item.writer.group.id,
                communityID: item.group.community.id
              })
            }
            titleNumberOfLines={2}
            hideChevron={false}
            chevronColor="#36c"
            roundAvatar
            title={item.headline}
            avatar={{
              uri:
                "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"
            }}
          />
          <Text
            style={{
              marginBottom: 10,
              fontSize: 16,
              color: "#000",
              fontFamily: "HelveticaNeue-Light"
            }}
          >
            {item.text}
          </Text>
          <TextInput
            onChangeText={onSetComment}
            label="Write Comment"
            underlineColor="#36a"
            style={{ backgroundColor: "#fff", width: "90%" }}
          />

          <View>
            <Icon
              name="md-send"
              type="ionicon"
              color="#999"
              onPress={() => {
                onCommentPost(item);
              }}
            />

            <View style={styles.loading}>
              <ActivityIndicator animating={item.modalLoader} size="small" />
            </View>
          </View>
        </Card>
      </View>
    );
  })}
</ScrollView>