How to display filtered data for react.js

making tables and filtering data in react is something that doesn’t seem hard to understand. However, much like any coding language, how you implement your code can completely change how your code can be managed and how flexible your design is for your projects. In this blog, I will be talking about a way to write and display filtered tables.

Introduction
Steps and Info

Working with just React
Creating radio buttons
Creating a filtered table

Introduction

In college, there was this big final for Website Development Fundamentals which was a class teaching the basics of web design. For that class, there was a final project that lasted two weeks. In that project, there was a little assignment part called datasets where the point was to take 4 datasets. Being able to pick and choose which one to work with. Then have the data be filtered and displayed on the screen. I found that this part was a fun good way to effectively show my skills in vanilla HTML, JavaScript, AJAX, and CSS. Because of this, I wanted to be able to recreate the project but in React.js.

The Rules and general info for the project are

the table was to display no less than three but no more than five.
The search bar is to display all records that start with the search string
Some parts of the table were to link a location using google maps
I am coding all of this in regular React.js so that this can be useful and understandable for new coders.

If you want to follow this along, I will put down at the bottom the links of the datasets used and a link to the project below.

The Steps And Tips

Working with just React

The point of the data and the design around it was that you couldn’t really put the JSON data into AJAX and then to a cookie-cutter table. Every table had to be unique because every dataset was different from one other, and that basically made it hard to reuse functions for other parts in vanilla JavaScript. For the tables, the tables required you to display links taking you to google maps from the datasets, and some of the datasets were built to have even more links. Some of the data would be empty so you had to do something for that.

Now react with its ability to make easy to create components, can make it flexible to potentially add datasets to it and still work. However, unless you install libraries for things like the tables, this sort of idea will be hard to achieve when you are just using a fresh install of React.js. Since effectively you now must create a table component that is very hard to be adaptable in the long term and will still be limited with the data it can display at a certain point. Furthermore, this doesn’t even mention the implementation of stuff like the ways to implement filters for those tables and the problems those might cause. I am not saying it’s impossible, React is a very good tool after all. But the point of React is to be able to code more general. You shouldn’t be having to worry about focusing on so much for things like tables and filters when working with this language. So the way that I am going to be teaching this is not flexible for every different table, however, it is going to be easy to teach and understand for those tables.

Creating radio buttons

When making the buttons there could be many ways you can create a bunch of buttons, so what I did was I made a file called RadioInfo.js and put in data values inside of a constant that will be called later in App.js under the name RadioInfo.

Next in App.js I will first import RadioInfo and make the App a Class Component to make a constructor. So that we have observable properties that can be changed, which is done using a thing called state. This will be handy so that we can carry data around and use it for the logic end of rendering, to which I will assign a property to state called isId with the value of zero. I will then create a method called onRadioChange that will take in a parameter id and assign that id to state.isId using setState which is asynchronous. I will then bind this method since we are going to pass an event handler to a new component called SearchFilesRadio.js.

So, to explain components a bit from the example from SearchFilesRadio function are going to return HTML. When you return something, you can only return one element, meaning that in order to get in multiple lines of HTML you would have to wrap it up into a div or something of the like. If you notice the parameter called props, which is a property almost like state, the difference between state and props is that you can’t really modify or change the data in props, and because of it being a parameter there is data going to be assigned to props for the function. In the return parentheses, there are braces calling children from the props parameter. The brackets are used to differentiate the two different coding styles from each other. There can even be methods assigned to props, so that those methods can be linked outside the file.

Once we are done with that, we go back to App.js to work on render for a return for our App. Inside of render, I make a constant called SearchFilesRadioDisplay and assign RadioInfo with a method called map. Map is used to map out all the data in RadioInfo and assign it towards other information under the property called radioData. We then assign a function from the arrow sign, that will call our SearchFilesRadio component which, we will assign the data from radioData to the variable names used in our SearchFilesRadio file. Once we are done with that we will then put in our return statement in braces our constant SearchFilesRadioDisplay to effectively display what we have done.

Creating a filtered table

**for the filtered tables I am only to address one table. Since most of the general idea of what happens will apply to the other datasets and their tables. Meaning that I am going to be working on creating the component DataTableTI.**

For our App.js we are going to add in some logic to display our future class components based on the radio buttons selection.

When we create our class component we will be importing our dataset with it to work with. Our state will have three properties, selectedData which is assigned to TrafficIncidentsData, filterData which is undefined, and error_output which will inform the user about no results. We will also bind two methods for later when we start filtering.

Once we are done with this you will then go to the render of DataTableTI and start putting in elements into the return kind of like what we have been doing with the SearchFilesRadio component. Once you are building your table there are new elements called <thead> and <tbody>. This is used to differentiate between the other <tr> when it comes to printing.

Now for the <tbody> the next part is like a constant but put right into the return statement this is to kind of show you the ways you can do events like this. So we are using filterData and mapping it with the return being a function. Just like the radio component.

Lastly the filters. The filter method first takes the data and filters it with the selected info acting like a loop when it comes to sorting. Then near at the end, it has an if-else statement checking if the count was greater than or equal to three, or if the input is blank. Which will differentiate what data gets what for the state error_output and filterData.