I have bee trying to pass the notes data to another component But I don't know why it says undefined.
export default App = () => {
const [notes, setNotes] = useState([
{ key: 1, value: "Hello there what up", title: "Some Title for this" },
{ key: 2, value: "I want to take notes", title: "another for this one" },
]);
return (
<View>
<FlatList
data={notes}
renderItem={({ note }) => (
<View>
<NoteItem note={note} />
</View>
)}
/>
</View>
);
};
export default NoteItem = ({ note }) => {
<Text>{note.title}</Text>
);
};
First of you assume that renderItem in Flatlist has a 'note' property inside it. It does not, it is called item. Also you pass notes but you try to deconstruct note? It should be like this:
export default App = () => {
const [notes, setNotes] = useState([
{ key: 1, value: "Hello there what up", title: "Some Title for this" },
{ key: 2, value: "I want to take notes", title: "another for this one" },
]);
return (
<View>
<FlatList
data={notes}
renderItem={({ item }) => (
<View>
<NoteItem note={item} />
</View>
)}
/>
</View>
);
};
This syntax - ({ note }) - means that the NoteItem component expects a prop named note to be set; however, you're setting the notes prop instead.
Try this:
<FlatList
data={notes}
renderItem={({ item, index }) => (
<View key={index}>
<NoteItem note={item} />
</View>
)}
/>
Related
I am trying to get the data of a flat list when onPressed is called the onpressed is called as I am using an alert but the selected data is not getting called
import React from "react";
import {StyleSheet,Text,View,FlatList,TouchableWithoutFeedback,} from "react-native";
const App = () => {
return (
<View style={styles.container}>
<FlatList
data={[
{ key: "Devin" },
{ key: "Dan" },
{ key: "Jillian" },
{ key: "Jimmy" },
{ key: "Julie" },
]}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => actionOnRow(item)}>
<View>
<Text style={styles.item}>Name: {item.key}</Text>
</View>
</TouchableWithoutFeedback>
)}
/>
</View>
);
};
const actionOnRow = (item) => {
const value = "Selected Item : "+ item;
alert(value);
};
export default App;
I have check the react documentation but i can't find anything on flatlist item OnPress, when i run this the alert displays the message "Selected : " but i am expecting "Selected : 'the item selected' ".
you are using alert . Alert does not accept two arguments.
Try using console.log or alert("Selected :" + item.key);
Answer in Full incase anyone else needs it
import React from "react";
import {StyleSheet,Text,View,FlatList,TouchableWithoutFeedback,} from "react-native";
const App = () => {
return (
<View style={styles.container}>
<FlatList
data={[
{ key: "Devin" },
{ key: "Dan" },
{ key: "Jillian" },
{ key: "Jimmy" },
{ key: "Julie" },
]}
renderItem={({ item }) => (
<TouchableWithoutFeedback onPress={() => selectStudent(item)}>
<View>
<Text style={styles.item}>Name: {item.key}</Text>
</View>
</TouchableWithoutFeedback>
)}
/>
</View>
);
};
const selectStudent = (item) => {
const value = "Selected Student : "+ item.key;
alert(value);
};
export default App;
export default function Search({ navigation }) {
const [state, setState] = useState({
places: [
{
id: 1,
title: 'Clinica da pele',
description: 'Dermatologista',
latitude:-2.42206406,
longitude:-54.71947789,
},
{
id: 2 ,
title:'Unimed',
description:'Hospital',
latitude:-2.42501721,
longitude:-54.71146077,
},
{
id: 3,
title: 'Dra. Josimar',
description:'Dermatologista',
latitude: -2.4288346,
longitude:-54.7290553,
}
]
here I will take the itens to show
return(
</View>*/
<SafeAreaView>
<FlatList
styles = {styles.PlaceContainer}
showsVerticalScrollIndicator
data={state.places}
keyExtractor={item => item.id}
renderItem={({ item }) => {
here I tried to select the item witch the description is Dermatologista but it didnt shows anything
item.description == "Dermatologista" ? (
<View key={item.id} style={styles.place} >
<Text>{item.title}</Text>
<Text>{item.description}</Text>
</View>
):""
I cant show nothing when I try to select but when it was just a return it came back all the info
}
}
/>
</SafeAreaView>
You must map your data to get each value form the array
Use an array method like map you retrieve your data.
state.places.map((place) => {
console.log(place);
})
I'm just logging here but you can put this in your react component to print out each place.
how can I access a single element from an array nested in a state like this
state = {
modal: false,
post: [
{
key: "1",
title: "A Good Boi",
des: "He's a good boi and every one know it.",
image: require("../assets/dog.jpg"),
},
{
key: "2",
title: "John Cena",
des: "As you can see, You can't see me!",
image: require("../assets/cena.jpg"),
},
]
};
.....
<MyList.Provider
value={{
}}
>
<FlatList
data={this.state.post}
renderItem={({ item }) => (
<>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => this.deleteItem(item)}
style={styles.Delete}
>
<MaterialCommunityIcons name="delete" color="red" size={30} />
</TouchableOpacity>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => this.props.navigation.navigate("Edit", item)}
style={styles.Edit}
>
<MaterialCommunityIcons
name="playlist-edit"
color="green"
size={35}
/>
</TouchableOpacity>
<Card
title={item.title}
subTitle={item.des}
image={item.image}
onPress={() =>
this.props.navigation.navigate("Details", item)
}
/>
</>
)}
/>
</MyList.Provider>
how can I do this like this.state.post({title}) or some way else??
I need to use this values with context so I can share and change some particular data with between 2 screens. I know to pass data I need to use context or navigation.navigate("route name",item). But if I use navigation I won't able to edit it but how can I pass data in context value from array set, if I do this.state.post it will return whole list and if i do this.state.post[0].title it will return only title of that post. So how can i do this? Please help
You have to indicate the index of the object you’re trying to access in the array. For instance to access the first object in the array you can do this
this.state.post[0]
below is my solution which follows the logic i think you are trying to achieve. I have used a flatlist
Let me know if it helps
import React, { Component } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
FlatList,
} from 'react-native';
export default class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
modal: false,
post: [
{
key: "1",
title: "A Good Boi",
des: "He's a good boi and every one know it.",
image: require("../assets/dog.jpg"),
},
{
key: "2",
title: "John Cena",
des: "As you can see, You can't see me!",
image: require("../assets/cena.jpg"),
},
]
};
}
handleEdit(item) {
const { post } = this.state;
const extractIndex = post.findIndex(e => e.key === item.key);
const newPost = post[extractIndex];
this.props.navigation.navigate('Edit', { newPost })
this.setState({ post });
}
handleDelete(item) {
const { post } = this.state;
const newPost = post.filter(e => e.key !== item.key);
this.setState({ post: newPost });
}
renderItem = ({ item }) => {
return (
<View>
<Text>
{item.title}
</Text>
<TouchableOpacity key={item.key} onPress={this.handleEdit.bind(this, item)}>
<Text>Edit</Text>
</TouchableOpacity>
<TouchableOpacity key={item.key} onPress={this.handleDelete.bind(this, item)}>
<Text>Delete</Text>
</TouchableOpacity>
</View>
);
}
render() {
return (
<View style={styles.container}>
<FlatList
data={this.state.post}
renderItem={this.renderItem}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Use .map() function
Ex-
var cat_data = categories_list.map(function (item) {
var cat_data = categories_list.map(function (item) {
return {
name: item.Name,
thumb_url: item.PictureModel.ImageUrl,
cat_id: item.Id.toString(),
};
});
this.setState({
data: cat_data,
});
i am using react-navigation v4 and i want to change the title and the approach i am using is slow while rendering(title that is set in the stack navigator is rendered first and then new one is rendered),is there better way i can render only the new one
export default NewsList = ({ results, navigation}) => {
return <View >
<FlatList
data={results}
keyExtractor={result => result.id}
renderItem={({ item }) => {
return (
<TouchableOpacity
onPress={() => navigation.navigate( 'news',title: item.title)}>
<NewsCard result={item} />
</TouchableOpacity>)
}}
/>
</View>
};
////////////////////////////////////////////////////////////////////
export default NewsScreen = ({ navigation}) => {
NewsScreen.navigationOptions = {
title: navigation.getParam("title");,
};
}
////////////////////////////////////////////////////////////////////
const NewsStack = createStackNavigator({
NewsList :NewsList,
News :NewsScreen
},{
initialRouteName:'NewsList',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#4BB5C3',
},
},
navigationOptions: {
tabBarLabel: 'NewsList',
},
});
export default createAppContainer(NewsStack);
Ciao, try to set title before navigate into NewsList like this:
export default NewsList = ({ results, navigation}) => {
return <View >
<FlatList
data={results}
keyExtractor={result => result.id}
renderItem={({ item }) => {
return (
<TouchableOpacity
onPress={() => {
navigation.setParams({ otherParam: item.title });
navigation.navigate('news');
}
}>
<NewsCard result={item} />
</TouchableOpacity>)
}}
/>
</View>
};
And I think you could remove navigationOptions in NewsScreen.
I'm a newbie in React Native and trying to pass props to ListHeaderComponent in FlatList
Here's the code:
const FirstRoute = (props) => {
const _renderHeader = () => {
return(
<View>
{props.isFollowed &&
<TouchableOpacity onPress={props.onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
</View>
)
}
return(
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
ListHeaderComponent={_renderHeader}
/>
</View>
)
};
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const initialLayout = { width: Dimensions.get('window').width };
export default function Parent() {
const [index, setIndex] = React.useState(0);
const [routes] = useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const [_isFollowed, setIsFollowed] = useState(false);
const _onSubmit = () => {
...
setIsfollowed(true)
}
const renderScene = ({route}) => {
switch(route.key){
case 'first': return <FirstRoute {...props} onSubmit={_onSubmit} isFollowed={_isFollowed} />
case 'second': return <SecondRoute {...props} />
}
};
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
But when I save it, the screen logs the error: Can't find the value of isFollowed
I think the problem is at the way I pass the props. I'm still learning it. Since when I delete the ListHeaderComponent, the FlatList still generates the list of images well. And I don't know if it has something to do with renderScene
I really don't understand why
Please help me. Thank you very much
Let me get this straight. You need to render _renderHeader dinamically based on _isFollowed state. So, you passed to the first route as props your _onSubmit function and _isFollowed state in order to get to access them at _renderHeader. Right?
As I see you actually doesn't need to do it once your _renderHeader has direct access to both _isFollowed state and _onSubmit function. Try it out as bellow:
export default function Parent() {
const [index, setIndex] = React.useState(0);
const [routes] = useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const [_isFollowed, setIsFollowed] = useState(false);
const initialLayout = { width: Dimensions.get('window').width };
function _onSubmit() {
setIsFollowed(true);
}
function _renderHeader() {
return (
<View>
{_isFollowed &&
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
</View>
);
}
const FirstRoute = () => {
return(
<View style={[styles.scene, { backgroundColor: '#ff4081' }]}>
<FlatList
data={data}
keyExtractor={item => item.id}
renderItem={itemData => ( <Image source={itemData.item.id} style={{height: WIDTH/3, width: WIDTH/3}} />)}
ListHeaderComponent={_renderHeader}
/>
</View>
)
};
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const renderScene = ({route}) => {
switch(route.key){
case 'first': return <FirstRoute />
case 'second': return <SecondRoute />
}
};
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
Other point I don't understand in your code and couldn't check cause I didn't try to run it was the function bellow:
function _renderHeader() {
return (
<View>
{_isFollowed &&
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
</View>
);
}
If you want to render TouchableOpacity just in case _isFollowed is true you should do it using ternary operator like so:
function _renderHeader() {
return (
<View>
{_isFollowed ?
<TouchableOpacity onPress={_onSubmit}>
<Text>You have followed this person</Text>
</TouchableOpacity> }
: <></>
}
</View>
);
}