disable only the send button in an nested active textbox with react-native

Question

I'm working on a react-native mobile app, which displays feeds which users can comment on. Against each feed, a textbox and a submit is available where users can comment and by default, each submit button is disabled till it receives a value.

The problem I'm currently facing is when a user starts to type for example in the first textbox, all send buttons in each row becomes active and also after the data is sent to the server the textbox still remains active.

Screen.js

 const feedsScreen = ({ posts, showLoader, onCommentPost, onSetComment, isEnabled }) => ( <View style={styles.container}> {posts.length === 0 && showLoader === false ? ( <View style={styles.noPost}> <Text style={{ textAlign: 'center', fontSize: 20, color: '#36a', fontFamily: 'HelveticaNeue-Light', fontWeight: '500' }} > No Posts for this group yet </Text> <Image source={require('../../../Images/CC/post.png')} /> </View> ) : null} {posts.map((item, i) => { return ( <View key={i} style={styles.user}> <Text style={{ marginBottom: 10, fontSize: 16, color: '#778899' }}>{item.text}</Text> <TextInput onChangeText={onSetComment} label="Write Comment" underlineColor="#36a" style={{ backgroundColor: '#fff', width: '90%' }} /> <View style={{ alignSelf: 'flex-end', position: 'relative', right: 0, top: -20 }}> <Icon disabled={!isEnabled} iconStyle={[isEnabled === true ? styles.likedColor : styles.unLikedColor]} name="md-send" type="ionicon" color="#999" onPress={() => { onCommentPost(item); }} /> </View> </View> ); })} </View> ); export default feedsScreen; 

Screen_Container.js

 import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View } from 'react-native'; import feedsScreen from './feedsScreen'; import * as API from '../../../API'; class FeedsContainerContainer extends Component { state = { posts: [], userId: '', showLoader: true, showArchiveSnackBar: false, showAfterCommentSnackBar: false, comment: '' }; componentDidMount = () => { const { navigation } = this.props; this.setState( {userId: navigation.getParam('communityMemberId')}, () => this.getData() ); }; setComment = comment => { this.setState({ comment: comment }); }; getData = async () => { const { userId } = this.state; const data = await API.getGroupPost(userId); console.log(data); this.setState({ posts: data, showLoader: false }); }; commentPost = async item => { this.setState({ posts: this.state.posts.map(post => post.id === item.id ? { ...post, modalLoader: true } : post ) }); const { userId, communityId, groupId, comment } = this.state; const data = await API.commentPost(userId, item.id, comment); this.setState({ posts: this.state.posts.map(post => post.id === item.id ? { ...post, modalLoader: false } : post ) }); this.setState(prevState => ({ posts: prevState.posts.map(el => { if (el.id === item.id) { return { ...el, commentsCount: el.commentsCount + 1 }; } return el; }) })); this.setState({ comment: '' }); }; render() { const isEnabled = this.state.comment.length > 0; return ( <feedsScreen posts={this.state.posts} showLoader={this.state.showLoader} onCommentPost={this.commentPost} modalLoader={this.state.modalLoader} onSetComment={this.setComment} isEnabled={isEnabled} commentValue={this.state.comment} userId={this.state.userId} /> ); } } export default FeedsContainerContainer; 

How do I only make the active textbox submit button active when it has a value and also clears it after its value sent to the database

Answer 1

There can be multiple post at same time so you should save comment for each post

Step 1 : Change in state . Save comment as object with key as index/id of each post

state = {
    comment: {}
  };

Step 2: Change onChangeText={onSetComment} function and also pass index of item

<TextInput
            onChangeText={(comment) =>  onSetComment(comment,i)}
            .......
          />

Step 3: Save comment with item index

setComment = (comment,index) => {
this.setState({ comment:...this.state.comment, [index]:comment });
}

Step 4: Remove isEnabled prop from main component

isEnabled={isEnabled}

Step 5 :check enable state in each item as you are sending commentValue prop receive in Screen.js

const feedsScreen = ({commentValue, posts, showLoader, onCommentPost, onSetComment, isEnabled }) => (
......

{posts.map((item, i) => {
const isEnabled = commentValue[i] &&  commentValue[i].length > 0;
.........