When my flat list is rendered...i am getting same item(item at index 0) in my rendered Item function and no data is visible in my flat list. I am new to react native...any help would be appreciated.
This is my Class which contains Flat List and in Render item function i am passing the item to another component which i have named as ListviewItem.
import React,{Component} from 'react';
import {FlatList,Text} from 'react-native';
import {connect} from 'react-redux';
import ListItem from './LibraryList';
class LibraryList extends Component{
componentWillMount(){
console.log(this.props);
}
renderItem({item, index}) {
console.log('render item called');
console.log(item);
return (
<ListItem item={item} />
);
}
render(){
return(
<FlatList
data={this.props.libraries}
renderItem={this.renderItem.bind(this)}
/>
);
}
}
const mapStateToProps = state =>{
console.log(state.libraries);
return {libraries:state.libraries};
}
export default connect(mapStateToProps)(LibraryList);
ListviewItem Class
import React,{Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';
class ListviewItem extends Component {
render(){
return(
<CardSection>
<Text>{this.props.item.title}</Text>
</CardSection>
);
}
}
export default ListviewItem;
try this please:
<View>
<FlatList
data={this.props.libraries}
renderItem={({ item }) => (
<ListItem item={item} />
)}
/>
</View>
And the item like this:
import React,{Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';
class ListItem extends Component {
render(){
return(
<View>
<Text>{this.props.item.title}</Text>
</View>
);
}
}
export default ListItem;
So first remove the CardSection from your list item, check if is working, and if this is working take a look at CardSection where you add a text which has some props form his parent.
Try this for item:
import React,{Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';
class ListviewItem extends Component {
render(){
return(
<CardSection>
<Text>{this.props.item.item.title}</Text>
</CardSection>
);
}
}
export default ListviewItem;
Related
import { FlatGrid } from 'react-native-super-grid';
class Grid extends React.Component () {
export default function Example() {
I just write until here..
But, don't work...
What I have to do ..
You have to return a valid response from the component. For example, if you want to make a Component using FlatGrid you can use this structure:
import { View } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
export default function Example() {
return(
<View>
<FlatGrid
itemDimension={130}
data={[1,2,3,4,5,6]}
renderItem={({ item }) => (<Text>{item}</Text>)}
/>
</View>
)
}
And also I see you are using a class class named Grid that is extending the React.Component () and from your code I see you are not importing the React from react so in order to use the class you have to use:
import React from 'react';
import { View } from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
export default class Grid extends React.Compoment {
render(){
return(
<View>
<FlatGrid
itemDimension={130}
data={[1,2,3,4,5,6]}
renderItem={({ item }) => (<Text>{item}</Text>)}
/>
</View>
)
}
}
I am making a pokedex, and from the FlatList I would like users to be able to click on a pokemon, and get directed to a detail page of the particular pokemon. However, the navigation.navigate is not working in both class and function based views. I have looked at the documentation and it uses the method I am trying to implement. What is going wrong?
App.js
import * as React from 'react';
import {NavigationContainer} from '#react-navigation/native';
import {createStackNavigator} from '#react-navigation/stack';
import PokedexData from './components/PokedexData';
import PokemonView from './components/PokedexData';
const Stack = createStackNavigator();
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
options={{headerShown: false}}
name="PokedexList"
component={PokedexData}
/>
<Stack.Screen name="PokemonView" component={PokemonView} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
PokedexData.js
import React, {Component} from 'react';
import axios from 'axios';
import {View, FlatList} from 'react-native';
import PodexRow from './PokedexRow';
export default class PokedexRow extends Component {
constructor(props) {
super(props);
this.state = {
pokemon: [],
};
}
componentDidMount() {
this.loadPokemon();
}
loadPokemon = () => {
axios
.get('https://pokeapi.co/api/v2/pokemon?limit=151')
.then((res) => this.setState({pokemon: res.data.results}));
};
renderItem = ({item}) => <PodexRow name={item.name} />;
render() {
return (
<FlatList
data={this.state.pokemon}
renderItem={this.renderItem}
keyExtractor={(item) => item.url}
/>
);
}
}
PokedexRow.js
import {View, StyleSheet, Text, Pressable} from 'react-native';
export default class PokedexRow extends Component {
constructor(props) {
super(props);
}
onPressHandle = () => {
alert(this.props.name);
const {navigate} = this.props.navigation;
};
render() {
return (
<View style={styles.PokedexRowView}>
<Pressable
style={styles.PokedexClickable}
onPress={this.onPressHandle}
android_ripple={{color: 'gray'}}>
<Text style={styles.PokedexRowText}>{this.props.name}</Text>
</Pressable>
</View>
);
}
}
const styles = StyleSheet.create({
/*stles removed for brevity*/
});
Because PokedexRow is not a screen where you get the navigation prop automatically. you can use useNavigation for a functional component to get access to navigation object or pass navigation from screen component to your PokedexRow as a prop.
renderItem = ({item}) => <PodexRow navigation={this.props.navigation} name={item.name} />;
I'm fairly new to react native and redux and was trying to render the library title from a JSON file in a flat list using redux, but my FlatList component does not render anything on the screen.
here's my code :
LibraryList.js
import React, { Component } from "react";
import { FlatList } from "react-native";
import { connect } from "react-redux";
import ListItem from "./ListItem";
class LibraryList extends Component {
renderItem(library) {
return <ListItem library={library} />;
}
render() {
return (
<FlatList
data={this.props.libraries}
renderItem={this.renderItem}
keyExtractor={library => library.id}
/>
);
}
}
const mapStateToProps = state => {
return { libraries: state.libraries };
};
export default connect(mapStateToProps)(LibraryList);
ListItem.js
import React, { Component } from "react";
import { Text } from "react-native";
import { CardSection } from "./common";
class ListItem extends Component {
render() {
return (
<CardSection>
<Text>{this.props.library.title}</Text>
</CardSection>
);
}
}
export default ListItem;
App.js
import React from "react";
import { View } from "react-native";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from "./reducers";
import { Header } from "./components/common";
import LibraryList from "./components/LibraryList";
const App = () => {
return (
<Provider store={createStore(reducers)}>
<View>
<Header headerText="Tech Stack" />
<LibraryList />
</View>
</Provider>
);
};
export default App;
The JSON file is like
[
{
"id": '' ,
"title": '' ,
"description":''
},
{
"id":'' ,
"title":'' ,
"description":''
}
]
I read some solutions for this suggesting changing the renderItem function to something like this
renderItem = ({ library }) => <ListItem library={library} />
still does not work. Can someone help me with this problem?
Thanks.
You have to make your renderItem as an arrow function. Otherwise you have to bind your function inside constructor in order to access function as renderItem={this.renderItem}.
import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';
class LibraryList extends Component {
renderItem = ({ item }) => {
return <ListItem library={item} />
}
render() {
return (
<FlatList
data={this.props.libraries}
renderItem={this.renderItem}
keyExtractor={library => library.id}
/>
);
}
}
const mapStateToProps = state => {
return { libraries: state.libraries };
};
export default connect(mapStateToProps)(LibraryList);
or you can call your renderItem as an arrow function inside render like below
renderItem={(item) => this.renderItem(item)}
but using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison.
Hope this helps you. Feel free for doubts.
In your flatlist try thi s:
<FlatList
data={this.props.libraries}
renderItem={({item, index}) => {
this.renderItems(item); // change this name to renderItems so that it doesnt clash with flatlist default renderItem
}}
/>
Hope it helps. feel free for doubts
You have several approaches to your problem.
Firstly your renderItem should be binded, so either do this
renderItem = (library) => {
or this
renderItem={this.renderItem.bind(this)}
besides the binding problem, flatlist prop renderItem will return to your function an object with this structure
{ item, index }
so in reality your renderItem should be like this
renderItem({ item }){
return <ListItem library={item} />;
}
I have been trying to use React-paginate library for pagination, however, the buttons formed by it is not clickable,i don't understand what i am doing wrong
And there are no example given, or no question asked
What would be the correct way of using this pagination
Here is the code of my App.js
import React, { Component } from 'react';
import './App.css';
import Navbar from '../src/components/navbar/navbar'
import SearchIt from '../src/components/searchField/search'
import Container from 'react-bootstrap/Container'
import Card from '../src/components/cards/cards'
import Axios from 'axios'
import Pagination from '../src/components/pagination/paginating'
class App extends Component {
state={
fetchedData:[]
}
componentDidMount(){
Axios.get('http://localhost:3000/1').then((responseData)=>{
//console.log(responseData.data)
this.setState({fetchedData:responseData.data})
}).catch((err)=>{
console.log(err)
})
}
handlePageClicked = data => {
let selected = data.selected;
console.log(selected)
};
render() {
return (
<div className="App">
<Navbar/>
<Container>
<SearchIt/>
<Card data={this.state.fetchedData}/>
<Pagination handlePageClick={this.handlePageClicked}/>
</Container>
</div>
);
}
}
export default App;
And here is the code for paginating.js
import React,{Component} from 'react'
import ReactPaginate from 'react-paginate';
import './paginateStyle.css'
const page = (props)=>{
return(
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
pageCount={10}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={props.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
)
}
export default page
These button are not clickable
I did a quick sample and it worked.
import ReactPaginate from 'react-paginate';
const Pagination = (props) => {
return (
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
pageCount={10}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={props.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
)
}
class App extends Component {
state = {
selectedPage: 0
}
handlePageClicked = data => {
let selected = data.selected;
this.setState({
selectedPage: selected
})
console.log(selected)
};
render() {
return (
<React.Fragment>
<div>You selected: {this.state.selectedPage}</div>
<div className="App">
<Pagination handlePageClick={this.handlePageClicked} />
</div>
</React.Fragment>
);
}
}
There could be something in paginateStyle.css which is making the Pagination not work properly or some other CSS in your application.
EDIT:
From comments, a ui component with higher z index was over them and was not visible/clickable
I got expected a component class got object error when I try to use loginPage component which I created.
here is index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<loginPage/>
</View>
);
}
}
AppRegistry.registerComponent('app', () => app);
and here is the loginPage.js
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class loginPage extends Component {
render() {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
}
You need to rename your loginPage class to LoginPage, the class must be capitalize
loginPage.js
import React from 'react';
import {
Text,
View
} from 'react-native';
const LoginPage = () => {
return (
<View>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
export default LoginPage;
index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import LoginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<View>
<LoginPage/>
</View>
);
}
}
remove the tags in index.ios.js
import React, {Component} from 'react';
import {
AppRegistry,
View
} from 'react-native';
import loginPage from './pages/loginPage'
class app extends Component {
render() {
return (
<loginPage/>
);
}
}
AppRegistry.registerComponent('app', () => app);