PropReturns is a platform for users to invest in Indian Real Estate backed by data. Build wealth and earn passive income by investing in hand-picked investment Real Estate with PropReturns. PropReturns offers an end to end solution for investors from placing an instant offer on a high ROI investment property to conducting the entire deal closure flow and paperwork through our platform. View inaccessible financial metrics, now at your fingertips and save months of research!

PropReturns

Here, we are going to implement the Categories screen. This screen will contain the list of categories related to the article posts. And on clicking on these categories, we will navigate to the posts which are based on that respective category. The implementation is simple. We are going to fetch the categories data and display it with the component. And by using the component, we will navigate to the new list screen which will display the list of article posts based on that category. FlatList TouchableOpacity First, we need to open the file and import necessary components and define some required state as well as shown in the code snippet below: Categories.js React ; {
  FlatList,
  ScrollView,
  View,
  TouchableOpacity,
} ; { (props) { (props); .state = { : , : [],
    };
  } import from 'react' import from 'react-native' export default . class Categories extends React Component constructor super this loading false categories Here, we have defined the loading state to display the loader on fetching of data and categories to store the categories list data. Now, we need to create a function called which will fetch all the categories data from the WordPress API as shown in the code snippet below: fetchCategorie() componentDidMount() { .fetchCategorie();
  } fetchCategorie() { .setState({ : }); response = fetch( ); categories = response.json(); .setState({ : categories
    });
  } this async this loading true const await `https://kriss.io/wp-json/wp/v2/categories` const await this categories Here, we have fetched the categories data using the fetch function. Then, we parse it to JSON and store it in the categories state. Then, we have called the function in the hook. componentDidMount Now, we need to add the data to in the function of Categories screen as shown in the code snippet below: FlatList render() render() { ( <FlatList
          data={this.state.categories}
          renderItem={({item}) => (
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate('CategorieList', {
                  categorie_id: item.id,
                  categorie_name: item.name
                })
              }>
              <Card>
                <Card.Content>
                  <Title>{item.name}</Title>
                </Card.Content>
              </Card>
            </TouchableOpacity>
          )}
          keyExtractor={(item, index) => index}
        />
      </ScrollView>
    );
  }
} return < > ScrollView Here, we have the template in the component. The is configured with data from for and prop for the key data. Then, the renderItem prop returns the template for the categories list. The template has the as the parent component which has navigation configured to the screen. We are going to implement the CategorieList screen later. Then, we have used the component and its subcomponents to display the category name. FlatList FlatList categories data keyExtractor TouchableOpacity CategorieList Card Hence, we will get the following result in the emulator screens: As we can see, we have got the categories list in the Categories list. By tapping on any list item, we need to navigate to the CategorieList screen which will display the articles related to that category. But, we get error because we have not yet implemented the screen. For that, we need to create a new screen called file in the folder. CategoriesList.js ‘./screens/’ Then, we need to make the imports and also define state as shown in the code snippet below: React ; {View, FlatList, TouchableOpacity} ; {Card, Title, Paragraph} ; moment ; HTML ; { (props) { (props); .state = { : [],
    };
  } import from 'react' import from 'react-native' import from 'react-native-paper' import from 'moment' import from 'react-native-render-html' export default . class CategorieList extends React Component constructor super this posts Here, we have defined the posts state which will store the posts fetched based in the category id. Next, we need to add the CategorieList screen to the stack navigator in the file. For that, we need to make use of the code from the following code snippet: App.js CategorieList ; StackNavigator = createStackNavigator({ : DashboardTabNavigator, : SinglePost, : CategorieList
}); import from './screens/CategoriesList' const DashboardTabNavigator SinglePost CategorieList Then, we need to implement the function called which is used to fetch the article posts based on the particular category. The overall implementation of the function is provided in the code snippet below: fetchPost componentDidMount() { .fetchPost();
 } fetchPost() { categorie_id = .props.navigation.getParam( ); response = fetch( ,
   ); post = response.json(); .setState({ : post});
 } this async let this 'categorie_id' const await `https://kriss.io/wp-json/wp/v2/posts?categories= ` ${categorie_id} const await this posts Here, we have fetched the posts using function from the WordPress API with category id value. Then, we parsed it and stored it in the posts state variable. Lastly, we called the function in the hook of the CategorieList screen. fetch() componentDidMount Now, we need to set up the template of the CategorieList screen to display the list of article post based on the particular category. For that, we need to use the code from the following code snippet in the function render() render() {
    categorie_title = .props.navigation.getParam( ); ( <Title style={{marginLeft: 30}} >{categorie_title}</Title> <FlatList
          data={this.state.posts}
          renderItem={({item}) => (
            <TouchableOpacity
              onPress={() =>
                this.props.navigation.navigate('SinglePost', {
                  post_id: item.id,
                })
              }>
              <Card>
                <Card.Content>
                  <Title>{item.title.rendered}</Title>
                  <Paragraph>
                    Published on {moment(item.date, 'YYYYMMDD').fromNow()}
                  </Paragraph>
                </Card.Content>
                <Card.Cover source={{uri: item.jetpack_featured_media_url}} />
                <Card.Content>
                  <HTML html={item.excerpt.rendered} />
                </Card.Content>
              </Card>
            </TouchableOpacity>
          )}
          keyExtractor={item => item.id}
        />
      </View>
    );
  }
} this 'title' return < > View Here, we have used the component to list the List of articles just as in the Home screen. Then, we have added the navigation to the SinglePost screen using the as the parent component. FlatList TouchableOpacity Hence, we will get the following result in the emulator screens: As we can see, we can successfully navigate to the CategorieList screen from the Categories screen. And by tapping on articles, we can navigate to the SinglePost screen. Summary In this chapter, we learned how to implement the overall UI of the Categories screen as well as the CategorieList screen. We learned how to fetch the categories of different posts from the WordPress API. Then, we implemented the navigation to the CategorieList screen where we learned how to fetch the articles post based on the and display them as a list. Then, by clicking on the article posts we navigated to the SinglePost screen. category id This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the from instamobile React Native App Templates

How To Build WordPress Client App with React Native Part #12: Creating Categories Screen

Second installment of my series for junior developers. About me, I come from a non-traditional Computer Science background, am an activist and advocate fighting for diversity and inclusion in the technology space. I blog about technical topics related to , and tech inclusion. JavaScript ReactJS This week I’m writing about data flow in the React eco-system. Before explaining and implementing, we need to know some terms: — are pieces of data that you can pass to . Typically, these are the of . This one way data flow (top to bottom / parent to child) is a main tenet in ReactJS programming. As this data is passed, it does not change. Props Presentational Components children Container Components — stores data that can change. We can read and write to . This object comes from or . State state Redux stateful components As in most of the JavaScript ecosystem, there are multiple ways to implement. I will show you three different ways to display data in your . Presentational Component One way is to pass it as a default prop: React, { Component } 'react'; import from class Address extends Component {render () {return (<div><img src={this.props.imgUrl} /><h4>{this.props.streetLineOne}</h4><h4>{this.props.streetLineTwo}</h4><h4>{this.props.state}</h4><h4>{this.props.zip}</h4></div>);}} Address.defaultProps = {imgUrl: '/images/icons/map_marker.svg',streetLineOne: '1234 This Way Street',streetLineTwo: 'Apt. 1',state: 'CA',zip: 94703,} export default Address Another, is to pass props via the Parent Component Step 1: Build the child component that will receive props from its parent. Mini-steps involved in this process: import React built ins, map your data in the JSX code you are returning, check what type of data each prop returns, and finally export your child component. import React built ins import React from 'react';import PropTypes from 'prop-types'; map your data in the JSX code you are returning const Address = (props) => {return ({props.showIcon &&<img className={ props.iconClassName }src="/images/icons/map_marker.svg" />}<address><div><span itemProp="streetAdress">{props.location}</span></div><div><span itemProp="addressLocality">{props.location.city},</span><span itemProp="addressRegion">{props.location.state}</span><span itemProp="postalCode">{props.location.zipCode}</span></div></address>);} The code above may seem dense at first, upon breakdown it is pretty simple. There are 3 React components inside of <Address /> The image component, which is only shown when the boolean returns . showIcon true A that contains the street address in div props.location Another that contains the locality of the location in div props.location.city props.location.state props.location.zipCode So the component is expecting a location property. So where is the props object coming from? As you will see, this data object is being passed down from its’ parent . <Address /> <LocationInfoCard /> check what type of data each prop returns Address.propTypes = {location: PropTypes.object.isRequired,showIcon: PropTypes.bool,iconClassName: PropTypes.string,}; export your newly built child component Address; export default Step 2: Build its Parent Component. Mini-steps involved: import root style sheet, CSS tools, declare your new parent component and pass down to it the data you want to display via props, export your new parent component. import React built ins, style sheets and CSS tools React 'react'; withStyles '../../../core/isomorphic-style-loader/withStyles'; s './LocationInfoCard.scss'; Address '../../Location/Address'; Phone '../../Location/Phone'; import from import from import from import from import from declare your new parent component and pass down to it the data you want to display via props. const LocationInfoCard = (props) => {const { location } = props //location is a key in the props object return (<div><Phonelocation={ location }iconClassName={ s.phoneIcon } /><Addresslocation={ location }showIconiconClassName={ s.mapMarkerIcon}/></div>);} export your new parent component withStyles(s)(LocationInfoCard) export default Our props / data object is now dynamically being piped in to . We will see in the last example how this parent component is getting this object. <LocationInfoCard /> The is a . The props object parameter it receives has a key inside it called . We can access which will help us write shorter syntax. Here is a clear explanation from <LocationInfoCard /> stateless functional component location location via object destructuring the Mozilla documentation. var myObj = {p: 42, q: true};var {p, q} = myObj; console.log(p) = 42 In the case above, we can write instead of . Similarly, in , we can now access this same property by using just its key, . p myObj.p props.location location Inside of there are 2 custom components: and . It may seem confusing that we are only passing the prop but remember, we mapped those data object properties when we wrote the child component, , even though I did not show you the example, you can imagine that the same applies to <LocationInfoCard /> <Phone /> <Address /> location <Address /> <Phone /> Last but not least, the third example I’m going to show you is how **_props_** are passed down using a data store like Redux. react-redux In the infographic above, we can see the that is the bread and butter of React applications. To keep it simple, high level and to solidify understanding of data flow in React, we are going to focus on the process highlighted by the red box. unidirectional data flow Step 1: Connect your Container Component to Redux npm install --save react-redux We are going to need a function called . React-redux allows us to connect our React application to Redux which will then allow us to connect to Redux’s data store where we can access . connect state means inputs that are being tracked and can be changed*. Some examples of state changes are variable reassignment, and user interactions (clicks, submitting forms, mouse moves — events). State — React 'react'; { connect } 'react-redux'; import from import from Typically you have to create and In our app, let’s assume this has already been built out for us to so we can understand in bite size pieces how data flows in React. actions reducers. Step 2: Import the component that is going to receive the prop. location LocationInfoCard './LocationInfoCard'; import from Step 3: Declare your function (see definition by ReduxJS documentation below) mapStateToProps To use , you need to define a special function called that tells how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping. connect() mapStateToProps mapStateToProps = state => ({location: state.location,}); const Here we can see that the function is creating a new object that has a property called which we are then passing to mapStateToProps location <LocationInfoCard /> = {path: '/location-info',action: () => { ConnectedLocationInfoCard =connect(mapStateToProps(LocationInfoCard); {component: (<ConnectedLocationInfoCard route="location-info" />),};},}; export const locationInfoCard const return Don’t feel overwhelmed by the dense code above. We’ll take it line by line to understand what is happening. We can see that a new constant called is being exported using . locationInfoCard ES6 syntax This constant contains an object that has a property called and a called . is where we will see the child components of displayed. path method action /location-info <LocationInfoCard /> What’s more interesting is the method. This is the heart of our newly connected container component. takes as an argument and returns a new route component. Now, when we go to this route, we will be able to access our application’s state and along with that its properties. action mapStateToProps LocationInfoCard To recap, I showed you 3 ways to pipe in data to your React component: Pass data in using default props Pass data down from parent to child components Map state to props using react-redux Hope my explanations were helpful. Feel free to reach out to me via comments.

PROPRETURNS

propreturns.com

11-50 employees

Since 2020

COMPANY RANKING

PROPRETURNS

EVERGREEN INDEX #8390

Representing this company? Click here to claim and customize this page!

PropReturns WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

PROPRETURNS

propreturns.com

11-50 employees

Since 2020

COMPANY RANKING

PROPRETURNS

EVERGREEN INDEX #8390

RELATED COMPANIESRANK

STORIES ABOUT PROPRETURNS

Representing this company? Click here to claim and customize this page!

PropReturns WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!