I have a dropdown with a list of countries that it has been translated well, as I want. Even that I can navigate down and up from the dropdown I can't select any option. Any explanation, help, or solution to this issue?
`const _createMenuItems = menuItems =>
menuItems.map((item, index) => (
<I18n>
{t =>{
return(
<MenuItem key={index} value={item} primaryText={t(item)} />
)
}}
</I18n>
)
)`
Related
I am trying to use the current index in ItemSeparatorComponent as shown below, however index is always empty and never returns a value, but item is successfully populated. I'd really appreciate it if anyone can point out what I'm doing wrong here?
<FlatList
numColumns={1}
data={messages}
keyExtractor={(item) => item.id.toString()}
renderItem={({item}) => <OFChatBubble message={item} />}
ItemSeparatorComponent={(item, index) => (
<DateSeparator item={item} index={index} />
)}
/>
To debug correctly you can try to add a debugger like this
ItemSeparatorComponent={(item, index) => {
debugger
return (
<DateSeparator item={item} index={index} />
)
}}
Open Chrome with the source tab opened to figure out the format of data={messages}
I'm pretty sure you just forgot the { }around the params in the arrow function you passed to ItemSeparatorComponent
The code should be:
ItemSeparatorComponent={({item, index}) => (
<DateSeparator item={item} index={index} />
)}
Edit:
I was wrong ItemSeparatorComponent does not get the same props as renderItem. It gets highlighted:boolean, leadingItem:<an object from the data you pass in> but you still need to use { } in order to get them
I am using react material UI for building my components. I am using react multi-select to get multiple values from the user.
<FormControl className={clsx(classes.formControl, classes.noLabel)}>
<Select
multiple
value={personName}
onChange={handleChange}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
input={<Input />}
renderValue={(selected) => {
if (selected.length === 0) {
return <em>Placeholder</em>;
}
return selected.join(", ");
}}
MenuProps={MenuProps}
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem disabled value="">
<em>Placeholder</em>
</MenuItem>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
It's working fine. But I need to close the dropdown when the user selects the value. But now it's closed only when the blur event triggers.
Is there any option to close the dropdown when the user selects any values?
Thanks in advance
Probably you can solve this by using the useRef hook.
Add the reference to the select and in the change handler you can try to close it by using ref.current.close().
import React , {useRef} from 'react';
const ref = useRef()
<FormControl className={clsx(classes.formControl, classes.noLabel)}>
<Select
multiple
value={personName}
onChange={handleChange}
ref={ref}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
input={<Input />}
renderValue={(selected) => {
if (selected.length === 0) {
return <em>Placeholder</em>;
}
return selected.join(", ");
}}
MenuProps={MenuProps}
inputProps={{ "aria-label": "Without label" }}
>
<MenuItem disabled value="">
<em>Placeholder</em>
</MenuItem>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, personName, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
const handleChange = (event) =>{
....
ref.current.close();
}
I'm trying to display a FlatList of items, with each item containing a FlatList of identical buttons. When one of the buttons is clicked, I want to receive both the parent FlatList item and the value the button corresponds to.
I've tried the following method with no success (timeItem is undefined):
timeSlotsKeyExtractor = (item, index) => item.toString();
timeSlots =
[
'8:00', '10:00', '12:00', '14:00', '16:00', '18:00'
];
renderDate = ({ item }) => {
return (
<View>
<Text>{item.date}</Text>
<FlatList
data={this.timeSlots}
keyExtractor={this.timeSlotsKeyExtractor}
renderItem={({ timeItem }) => (
<TouchableOpacity onPress={() => this.addTimeSlot(item, timeItem)}>
<View><Text>{timeItem}</Text></View>
</TouchableOpacity>
)}
horizontal={true} />
</View>
)
}
addTimeSlot(item, timeItem) {
console.log(item)
console.log(timeItem)
}
I'm aware of SectionLists, and as such also attempted to make each item of my parent FlatList an object containing both the item and the array of timeSlots, however, I wasn't sure how to go about getting the header in the renderItem section:
Screenshot of SectionList code:
<SectionList
sections={this.state.weekDates}
renderSectionHeader={({ section }) => (
<Text>{section.date} </Text>
)}
renderItem={({ item }) => (
<Text>
{iten.date}
{item.timeSlots}
</Text>
)}
keyExtractor={(item, index) => index}
/>
Where am I going wrong with these approaches? I'm fairly new to React Native so there's a good chance I've missed something really simple.
I would like to present the user with a list of items to choose from. The items are sourced from a Redux state object. It is a list of the contacts on the device.
I used a "FlatList" from React-Native and a "ListItem" from React-Native-Elements. The ListItem has a CheckBox.
For the user to check/uncheck an item in the list, he/she can click on the CheckBox or any part of the ListItem.
My 1st Attempt: As you can see in the following code, I had to duplicate part of the code to achieve this. Is there a smarter way of doing this (to avoid code duplication)?
<FlatList
keyExtractor={(item, index) => index.toString()}
data={props.contactList}
renderItem={_renderItem}
ListEmptyComponent={<Text>There are no contacts to show.</Text>}
refreshing={state.refreshing}
onRefresh={_onRefresh}
/>
const _renderItem = ({ item, index }) => {
return (
<ListItem
title={item.name}
onPress={() => {
// The following 2 statements are repeated (below)!!!
_toggleCheck(index);
props.acContactSelect(index);
}}
checkBox={{
checked: _isItemChecked(index),
checkedIcon: "check",
onPress: () => {
// The following 2 statements are repeated (above)!!!
_toggleCheck(index);
props.acContactSelect(index);
},
}}
/>
);
};
My 2nd Attempt: I tried using a function. I got the error message (Maximum update depth exceeded.)
<FlatList
.. {similar to the code above}
/>
const _renderItem = ({ item, index }) => {
return (
<ListItem
..
onPress={_onPress(index)}
checkBox={{
..
onPress: _onPress(index),
}}
/>
);
};
const _onPress = (index) => {
_toggleCheck(index);
props.acContactSelect(index);
};
Thanks for your effort and time to help...
Please change this code
<ListItem
..
onPress={_onPress(index)}
checkBox={{
..
onPress: _onPress(index),
}}
/>
to
<ListItem
..
onPress={() =>_onPress(index)}
checkBox={{
..
onPress:() => _onPress(index),
}}
/>
onPress={_onPress(index)} will call function immediately
I am displaying a list of Material Kit buttons (using SectionList) and want to be able to display their key (ie. their index) when they are clicked - however am struggling with the getting it working with an MK button.
Any help would be really appreciated. Thanks a ton!
Button builder with onPress:
AllConnectionsItemButton = MKButton.flatButton()
.withOnPress( (key) => alert(key))
.build()
SectionList:
<SectionList
renderItem={({item, index, section}) => (
<AllConnectionsItemButton key={index}>
<Text>{item.name}</Text>
</AllConnectionsItemButton>
)}
renderSectionHeader={({section: {title}}) => (
<View>
<Text>{title}</Text>
</View>
)}
sections={this.state.myList}
keyExtractor={(item, index) => item + index}
/>