We Keep Coding

Selecting multiple buttons from map function in react native

I'm trying to select multiple options from the map function but i cant seem to generate logic to do so, i'm selecting a button and that button is generating a heading and a text felid in a scrollview with the lable of button as heading, but now i want to select multiple buttons to generate multiple components:
Any logic and help would be great please, m stuck!
here is code for refrence:
this is usestate and buttonLabels array:
const handlePress = (index) =>
{
setSelectedButtonIndex(index === selectedButtonIndex ? null : index);
};
const buttonLabels = [
'Homeowner',
'In-depth',
'Inherited',
'Probate',
'Lost income',
'Relocation',
'Divorce',
'Downsizing'
];
and here is the map function:
{/* List of Items */}
<View style={styles.buttonGrid}>
{buttonLabels.map((label, index) => (
<TouchableOpacity
key={index}
style={[
styles.button,
{ backgroundColor: index === selectedButtonIndex ? '#346284' : '#FFFFFF' },
]}
onPress={() => handlePress(index)}
>
<Text style={{ color: index === selectedButtonIndex ? '#FFFFFF' : '#888889' }}>
{label}
</Text>
</TouchableOpacity>
))}
</View>
and here i'm generate component at the selectedbutton
<ScrollView style={{flexGrow:2}}>
{selectedButtonIndex !== undefined && (
<View style={styles.headingContainer}>
<View style={styles.heading}>
<Text style={styles.headingText}>{buttonLabels[selectedButtonIndex]}</Text>
<TouchableOpacity onPress={() => setSelectedButtonIndex(undefined)}>
<Image source={require('../assets/Icons/close.png')} style={styles.closeIcon} />
</TouchableOpacity>
</View>
<TextInput style={styles.textInput} placeholder="Enter Text Here" />
</View>
)}
</ScrollView>

if you want to choose multiple item,
let array=[{"option":"option1",selected:false}, {"option":"option1",selected:false}]
based on index or item you need to change the boolean value, then show when the boolean value is true show the item example ,
onpress function like
const onselect=(selectedIndex)=>{
let temp=array //local array
temp.map((item,index)=>{
if(index==selectedIndex) item.selected=!item.selected
})
setState([...temp]) //set your local state
})
in render method,
array.map((item,index)=>{if(item.selected) <View></View>})

How to render component via FlatList?

Using react native with typescript and redux toolkit
Hi I'm bothering with render a list of messages via FlatList. By ScrollView everything rendering good but I need to implement infiniti scroll. So I'm doing something like this
const MessagesScreen = () => {
const companyId = useAppSelector(getCompanyId);
const userId = useAppSelector(getUserId);
const {
data: messages,
isLoading,
refetch
} = useGetMessagesQuery({ userId, companyId });
useFocusEffect(refetch);
return (
<FlatList
data={messages}
renderItem={() => {
<Messages messages={messages} />;
}}
/>
);
};
In return() I'm trying to render FlatList with component Messages which is down here:
const Messages = ({ messages }: { messages: Message[] }) => {
const navigation =
useNavigation<RootStackScreenProps<'DrawerNavigator'>['navigation']>();
const { colors } = useTheme();
return (
<View style={styles.container}>
{messages.map(message => {
const createdAt = message.created_at;
const isRead = message.read;
const icon = isRead ? 'email-open-outline' : 'email-outline';
const onClick = () => {
navigation.navigate('Message', {
messageId: message.id
});
};
return (
<TouchableOpacity key={message.id} onPress={onClick}>
<View
style={[styles.message, { borderBottomColor: colors.separator }]}
>
<View style={styles.iconPart}>
<Icon
name={icon}
type="material-community"
style={
isRead
? { color: colors.separator }
: { color: colors.inputFocus }
}
size={24}
></Icon>
</View>
<View style={styles.bodyPart}>
<Text
numberOfLines={1}
style={[isRead ? styles.readSubject : styles.unReadSubject]}
>
{message.subject}
</Text>
<Text
numberOfLines={1}
style={[isRead ? styles.readBody : styles.unReadBody]}
>
{message.body}
</Text>
</View>
<View style={styles.datePart}>
<Text style={{ color: colors.shadow }}>
{dayjs(createdAt).fromNow()}
</Text>
</View>
</View>
</TouchableOpacity>
);
})}
</View>
);
};
Actually behaviour is just rendering white screen with error
Possible Unhandled Promise Rejection (id: 17):
Error: Objects are not valid as a React child (found: object with keys {id, msg_type, created_at, subject, body, author, company_id, read}). If you meant to render a collection of children, use an array instead.

there is problem with your call back function:
you are not returning Messages component
1:Remove curly braces
return (
<FlatList
data={messages}
renderItem={() => <Messages messages={messages}/> }
/>
);
2:Add return statement
return (
<FlatList
data={messages}
renderItem={() => {
return <Messages messages={messages} />;
}}
/>
);

Couple things:
You're using the renderItem callback incorrectly:
<FlatList
data={messages}
renderItem={() => {
// ^ ignoring the renderItem props
return <Messages messages={messages} />;
}}
/>
Here, for each item in the messages array, you're rendering a component and passing all the messages into it. So you'll get repeated elements.
The renderItem callback is passed {item, index} where item is the CURRENT item in the array (index is the index into the array)
See docs here:
https://reactnative.dev/docs/flatlist
The usual thing is the renderItem callback renders ONE item at a time, like this:
<FlatList
data={messages}
renderItem={({item}) => {
return <Message message={item} />;
}}
/>
e.g. I'd make a <Message/> component that renders one item only.

How to apply changes to a single element in a Flatlist in React Native

I have a Flatlist that renders multiple posts, each post has a text section, the text can get very big so I'm using a show more method to expand/hide the text, and I'm handling the status of it using a state, however, when I click on a post to expand the text, it expands all posts in the Flatlist, I tried creating a dynamic Ref for each post, but I can't figure out a way to change the text content accordingly, anything I'm missing?
here's my code:
const [showMore, setShowMore] = useState(false);
const refs = useRef([]);
// Inside a Flatlist render item:
<View style={styles.postContainer}>
{item.data.postText.length > 120 ? (
showMore ? (
<TouchableOpacity onPress={() => setShowMore(!showMore)}
ref={(expandableText) => (refs.current[index] = expandableText)}>
<Text style={styles.postDescription}>{item.data.postText}</Text>
<Text style={styles.seeMore}>Show less</Text>
</TouchableOpacity>
) : (
<TouchableOpacity onPress={() => setShowMore(!showMore)}>
<Text style={styles.postDescription}>
{`${item.data.postText.slice(0, 120)}... `}
</Text>
<Text style={styles.seeMore}>Show more</Text>
</TouchableOpacity>
)
) : (
<Text style={styles.postDescription}>{item.data.postText}</Text>
)}
</View>

You are using the same state for all items of the FlatList. Hence, if you change the state, all items will be expanded. You could keep a boolean array as a state. The index of this state array corresponds to the index of a component inside the flatlist.
// data is the data of your FlatList
// we use this to initialize each show more value with false
const [showMore, setShowMore] = useState(data.map(data => false))
In your render function you use it as follows.
renderItem={({item, index}) => {
return <View style={styles.postContainer}>
{item.data.postText.length > 120 ? (
showMore[index] ? (
<TouchableOpacity onPress={() => handleShowMore(index)}
ref={(expandableText) => (refs.current[index] = expandableText)}>
<Text style={styles.postDescription}>{item.data.postText}</Text>
<Text style={styles.seeMore}>Show less</Text>
</TouchableOpacity>
) : (
<TouchableOpacity onPress={() => handleShowMore(index)}>
<Text style={styles.postDescription}>
{`${item.data.postText.slice(0, 120)}... `}
</Text>
<Text style={styles.seeMore}>Show more</Text>
</TouchableOpacity>
)
) : (
<Text style={styles.postDescription}>{item.data.postText}</Text>
)}
</View>
}
The handleShowMore function is as follows.
function handleShowMore(index) {
setShowMore(prev => prev.map((element, idx) => {
if(idx === index) {
return !element
}
return element
}))
}

How do I change the state present in a specific item within a flatlist?

I am generating a flatlist that contains comments. Inside the comment component, I'm using a state isCollpsed to determine if the individual comment is collapsed or not. Pressing on each individual comment does make it collapse. However, I want to manipulate this state from the parent component without affecting every other comment. How could I achieve this?
I tried using the reference hook to access each individual item in the flatlist but it keeps returning 'undefined'. I'm using the react-native-collapsible library to collapse the comments.
My Flatlist:
<FlatList
data={SAMPLE_COMMENTS}
keyExtractor={keyExtractor}
renderItem={({item})=>
<Comment
ref={(el) => {rowRefs.current[item.id] = el} }
onPress={()=>{rowRefs.current[item.id].collapseFunction()}}
body={item.body}
author={item.author}
level={item.level}
createdAt={item.createdAt}
commentId={item.id}
commentChildren={item.replies} />}
/>
Comment Component :
const [isCollapsed, setIsCollapsed] = useState(false);
const collapseFunction = () => {setIsCollapsed(!isCollapsed)};
return (
<Collapsible collapsed={isCollapsed}>
<TouchableWithoutFeedback onPress={onPress}>
<View style={styles.container}>
</View>
</TouchableWithoutFeedback>
</Collapsible>

you can use recursive function
// add this to parent
<MapComments
comments={SAMPLE_COMMENTS}
childClickHandler={onItemClickHandler}
/>
// MapComments component
const MapComments= ({
Comments= [],
childClickHandler,
}) => {
return (
<ScrollView>
<Tree
CommentTree={CommentTree}
childClickHandler={childClickHandler}
/>
</ScrollView>
);
};
const Tree = ({CommentTree= [], childClickHandler}) => {
return (
<View>
{CommentTree.map(tree => (
<TreeNode
key={tree.commentId}
node={tree}
childClickHandler={childClickHandler}
/>
))}
</View>
);
};
const TreeNode = ({node, childClickHandler}) => {
const [childVisible, setChildVisiblity] = useState(false);
const hasChild = node.commentChildren.length > 0 ? true : false;
return (
<View
style={{marginRight: node.Level > 1 ? 40 : null}}>
<TouchableOpacity
onPress={() =>
hasChild ? setChildVisiblity(prev => !prev) : childClickHandler(node)
}>
<Text numberOfLines={1} style={styles.label}>
{node.body}
</Text>
{hasChild ? (
<AntDesign name={childVisible ? 'minus' : 'plus'}
/>
) : (
<FontAwesome name="circle" />
)}
</TouchableOpacity>
{hasChild && childVisible && (
<Tree
childClickHandler={childClickHandler}
knowledgeTree={node.commentChildren}
/>
)}
</View>
);
};

change state for a specific children in a loop with "useState"

I am using React native and
I have a loop in which some property types are being displayed,
i created only one state for it because property types are being fetched from DB.
What i want to do is to show them selected. kindly show me a way to achieve it.
const [propBCol, setPropBCol] = useState('#EDEDEE');
const [propTCol, setPropTCol] = useState('#000000');
{propType.map((item, index) => {
return (
<TouchableOpacity style={{
backgroundColor: propBCol,
...ListingFilterStyles.filterAnyBtn,
...ListingFilterStyles.btnMale,
}}
onPress={() => proptypes(item)}>
<Text style={{color: propTCol}}>{item.value}</Text>
</TouchableOpacity>
);
})}
the propTypes function:
const proptypes = item => {
setPropBCol('red');
setPropTCol('White')
}
enter code here
How can i change the selected item color, by above code all are item colors are being changed

const [propBCol, setPropBCol] = useState('#EDEDEE');
const [propTCol, setPropTCol] = useState('#000000');
const [selected, setSelected] = useState([]);
{propType.map((item, index) => {
return (
<TouchableOpacity style={{
backgroundColor: selected.includes(index) ? propBCol : item.propBCol,
...ListingFilterStyles.filterAnyBtn,
...ListingFilterStyles.btnMale,
}}
onPress={() => proptypes(index)}>
<Text style={{color: selected.includes(index) ? propTCol : item.propTCol}}>{item.value}</Text>
</TouchableOpacity>
);
})}
const proptypes = (index) => {
setSelected(prev => {
return [
...prev,
index
]
})
}

You should not declare a state for each one of the propType you are receiving. What you can do is, you can add a key inside the object that you are getting and saving it inside the state.
And on press you can change the value of the checked key using simple index values of the array. You have to pass the data inside the method and write the method as below
const propsTypes = (item, index) => {
var propTypesVar = [...propTypes]
propTypesVar[index].propBCol= <<Your desired color>>
propTypesVar[index].propTCol= <<Your desired color>>
setPropType(propTypesVar)
}
After that the value of propBCol will be inside the object of your propType array and you can render anything to show the user if the value is selected or not i.e.
{propType.map((item, index) => {
return (
<TouchableOpacity
style={{
backgroundColor: item.propBCol,
...ListingFilterStyles.filterAnyBtn,
...ListingFilterStyles.btnMale,
}}
onPress={() => proptypes(item)}>
<Text style={{color: item.propTCol}}>{item.value}</Text>
</TouchableOpacity>
);
})}