Filtering Array of objects in React JS – Contact Mentor (2023)

In this article, we will learn how to filter the array of objects in React JS. The React JS app will have the following features:

  1. Display a list of all cars with details and images.
  2. Filter car list by years ie displays all cars with release_year 2020.
  3. Filter car list by brand name from the dropdown, ie display all BMW cars.

Filtering Array of objects in React...

(Video) Rendering Arrays in React.js - Part 13

Filtering Array of objects in React JS

(Video) #2: Only Two Words To Get All Unique Values From Array of Objects in React JS

1. Declare a constant for an array of objects

Every car is represented as a JS object with name, url, and release_year properties. The list of car objects is declared as an array assigned to “carList” JS constant.

const carList = [ { name: "BMW M6", url: "https://mediapool.bmwgroup.com/cache/P9/201411/P90169551/P90169551-the-new-bmw-m6-coup-exterior-12-2014-600px.jpg", release_year: 2020 }, { name: "VW Polo", url: "https://cdn.euroncap.com/media/30740/volkswagen-polo-359-235.jpg?mode=crop&width=359&height=235", release_year: 2018 }, { name: "Audi S6", url: "https://www.motortrend.com/uploads/sites/5/2020/03/6-2020-audi-s6.jpg?fit=around%7C875:492.1875", release_year: 2020 }, { name: "BMW M2", url: "https://imgd.aeplcdn.com/0x0/cw/ec/37092/BMW-M2-Exterior-141054.jpg?wm=0", release_year: 2019 }, { name: "Audi A3", url: "https://cdn.motor1.com/images/mgl/BEooZ/s3/2021-audi-s3.jpg", release_year: 2019 } ];

2. Declaring React state for filter values

We will declare the following React state to implement functionality in the component:

  1. filteredList: State for list of all car objects that satisfy all the filter conditions.
  2. selectedBrand: State for the brand_name value based on which filteredList state has to be filtered.
  3. selectedYear: State for the year which is used to filter car object based on release_year property.
 // List of all cars satisfing all the filters const [filteredList, setFilteredList] = useState(carList); // Selected Brand name filter const [selectedBrand, setSelectedBrand] = useState(""); // Selected Year filter const [selectedYear, setSelectedYear] = useState();

3. Display the list of items on the screen

Now the declared array of car objects should be displayed on the screen through the React component. We apply Array.map() on filteredList React state to add details of every entry to JSX code.

ThefilteredList React state initially contains the list of all the elements, hence all the car details displayed on the screen. React JS automatically updates the list of car details displayed on the screen based onfilteredList state value when additional filters are applied.

(Video) React Hooks Tutorial - 5 - useState with array

return ( <div id="car-list"> {filteredList.map((item, index) => ( <div className="car-item" key={index}> <div className="car-name">{`Name: ${item.name}`}</div> <div className="car-year">{`Year: ${item.release_year}`}</div> <img className="car-image" src={item.url} alt="car-img" /> </div> ))} </div>);

4. Filter items by brand name using String methods

We declare a JS function that filters an array of car objects based on brand name with the following steps:

  1. Avoid filtering array when selectedBrand = “” .
  2. Filter filteredData array to include only car names with selectedBrand word.
  3. return filteredData array.
const filterByBrand = (filteredData) => { // Avoid filter for empty string if (!selectedBrand) { return filteredData; } const filteredCars = filteredData.filter( (car) => car.name.split(" ").indexOf(selectedBrand) !== -1 ); return filteredCars;};

5. Filter items by Year using the Comparison operator

We declare JS function that filters array of car objects by release_year property with the following steps:

  1. Avoid filtering array when selectedYear == null
  2. Filter array to include all the car objects where release_year property matches selectedYear.
  3. return filteredData array.
const filterByYear = (filteredData) => { // Avoid filter for null value if (!selectedYear) { return filteredData; } const filteredCars = filteredData.filter( (car) => car.release_year === selectedYear ); return filteredCars; };

6. Functions to handle filter change

We will create the following functions to handle changes in filter values:

  1. handleBrandChange: update selectedBrand state based on event target value.
  2. handleYearChange: Reset seletedYear if the same year is selected, else selectYear is updated with inputYear.
// Update seletedBrand stateconst handleBrandChange = (event) => { setSelectedBrand(event.target.value);};// Toggle seletedYear stateconst handleYearChange = (event) => { const inputYear = Number(event.target.id); if (inputYear === selectedYear) { setSelectedYear(""); } else { setSelectedYear(inputYear); }};

7. Add HTML code for filters

To allow users to trigger filter functions, we need to add HTML code for both filters by brand name and year. We will create an HTML dropdown for selecting the brand name filter values. The options for the filter by year is displayed using <div></div> containers.

(Video) JavaScript Problem: Sorting an Array of Objects

<div className="brand-filter"> <div>Filter by Brand :</div> <select id="brand-input" value={selectedBrand} onChange={handleBrandChange} > <option value="">All</option> <option value="BMW">BMW</option> <option value="VW">VW</option> <option value="Audi">Audi</option> </select></div><div>Filter by Year</div><div id="year-options" onClick={handleYearChange}> <div className={selectedYear === 2018 ? "active-option" : "filter-option"} id="2018" > 2018 </div> <div className={selectedYear === 2019 ? "active-option" : "filter-option"} id="2019" > 2019 </div> <div className={selectedYear === 2020 ? "active-option" : "filter-option"} id="2020" > 2020 </div></div>

8. React Hooks to trigger an update for filtered values

The handle filter functions only update the selectedBrand and selectedYear states, but the filterByBrand and filterByYear JS functions are not triggered.

We will create a React useEffect() with a callback function that applies both filterByBrand and filterByYear on carList, then update filteredList state with the result. Both selectBrand and selectedYear states are added as the dependencies for useEffect() to ensure filter functionality is triggered every time any one of the values is changed.

useEffect(() => { var filteredData = filterByBrand(carList); filteredData = filterByYear(filteredData); setFilteredList(filteredData);}, [selectedBrand, selectedYear]);
Filtering Array of objects in React JS – Contact Mentor (1)

Final Solution Code

App.js

(Video) React Hooks Tutorial - 4 - useState with object

import { useEffect, useState } from "react";import "./styles.css";export default function App() { // Array of all car objects const carList = [ { name: "BMW M6", url: "https://mediapool.bmwgroup.com/cache/P9/201411/P90169551/P90169551-the-new-bmw-m6-coup-exterior-12-2014-600px.jpg", release_year: 2020 }, { name: "VW Polo", url: "https://cdn.euroncap.com/media/30740/volkswagen-polo-359-235.jpg?mode=crop&width=359&height=235", release_year: 2018 }, { name: "Audi S6", url: "https://www.motortrend.com/uploads/sites/5/2020/03/6-2020-audi-s6.jpg?fit=around%7C875:492.1875", release_year: 2020 }, { name: "BMW M2", url: "https://imgd.aeplcdn.com/0x0/cw/ec/37092/BMW-M2-Exterior-141054.jpg?wm=0", release_year: 2019 }, { name: "Audi A3", url: "https://cdn.motor1.com/images/mgl/BEooZ/s3/2021-audi-s3.jpg", release_year: 2019 } ]; // List of all cars satisfing all the filters const [filteredList, setFilteredList] = useState(carList); // Selected Brand name filter const [selectedBrand, setSelectedBrand] = useState(""); // Selected Year filter const [selectedYear, setSelectedYear] = useState(); const filterByBrand = (filteredData) => { // Avoid filter for empty string if (!selectedBrand) { return filteredData; } const filteredCars = filteredData.filter( (car) => car.name.split(" ").indexOf(selectedBrand) !== -1 ); return filteredCars; }; const filterByYear = (filteredData) => { // Avoid filter for null value if (!selectedYear) { return filteredData; } const filteredCars = filteredData.filter( (car) => car.release_year === selectedYear ); return filteredCars; }; // Update seletedBrand state const handleBrandChange = (event) => { setSelectedBrand(event.target.value); }; // Toggle seletedYear state const handleYearChange = (event) => { const inputYear = Number(event.target.id); if (inputYear === selectedYear) { setSelectedYear(""); } else { setSelectedYear(inputYear); } }; useEffect(() => { var filteredData = filterByBrand(carList); filteredData = filterByYear(filteredData); setFilteredList(filteredData); }, [selectedBrand, selectedYear]); return ( <div className="App"> <div className="brand-filter"> <div>Filter by Brand :</div> <select id="brand-input" value={selectedBrand} onChange={handleBrandChange} > <option value="">All</option> <option value="BMW">BMW</option> <option value="VW">VW</option> <option value="Audi">Audi</option> </select> </div> <div>Filter by Year</div> <div id="year-options" onClick={handleYearChange}> <div className={selectedYear === 2018 ? "active-option" : "filter-option"} id="2018" > 2018 </div> <div className={selectedYear === 2019 ? "active-option" : "filter-option"} id="2019" > 2019 </div> <div className={selectedYear === 2020 ? "active-option" : "filter-option"} id="2020" > 2020 </div> </div> <div id="car-list"> {filteredList.map((item, index) => ( <div className="car-item" key={index}> <div className="car-name">{`Name: ${item.name}`}</div> <div className="car-year">{`Year: ${item.release_year}`}</div> <img className="car-image" src={item.url} alt="car-img" /> </div> ))} </div> </div> );}

styles.css

.App { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; font-size: 20px;}#year-options { display: flex; gap: 10px; margin: 10px;}.car-image { width: 200px; height: 180px;}#car-list { display: grid; gap: 20px; min-height: 480px; grid-template-columns: repeat(3, 1fr);}.car-item { display: flex; height: 200px; flex-direction: column; background-color: #fafafa; border: 1px solid black; padding: 10px; gap: 5px;}.filter-option,.active-option { padding: 10px 20px; min-width: 50px; border-radius: 2rem;}.brand-filter { display: flex; margin: 15px;}#brand-input { width: 80px; margin: 0 10px; height: 30px;}.filter-option:hover,.active-option { background-color: #48b393; color: white; cursor: pointer; display: flex; justify-content: center; transition: all 0.1s;}

Related Articles

  • Javascript: How to find an object in an Array of objects
  • 45 Best React Projects for Beginners in Easy to Hard Order
  • How to use Javascript .map() for Array of objects
  • 45 JavaScript Projects for Beginners with Videos
  • How to create a Responsive Carousel in React JS
  • React Select Dropdown with Search and Multi-select

FAQs

How do you filter an array of objects in React? ›

To filter an array of objects in React:

Call the filter() method on the array. On each iteration, check if a certain condition is met. The Array. filter methods returns an array with all elements that satisfy the condition.

How do I use the filter function in React? ›

Filtering in React

The use of filter() translates one-to-one to the React world. Given the filtering functions and general example above, you can create the following component: // ... const App = () => { const [input] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); return ( <div> <div>Even: {input.

How do I filter with select in React? ›

  1. import React, { Component } from "react";
  2. import "./styles.css";
  3. import { Data } from "./data";
  4. import Products from "./Products";
  5. import Filter from "./Filter";
  6. export default class App extends Component {
  7. constructor() {
  8. super();

What is the best way to handle large data in React? ›

When handling a large list, it's important not to render all the data at once to avoid overloading the DOM tree. The best approach to improving performance depends on your use case. If you prefer to render all the data in one place, infinite scroll or a windowing technique would be your best bet.

What is filter () in JavaScript? ›

Definition and Usage. The filter() method creates a new array filled with elements that pass a test provided by a function. The filter() method does not execute the function for empty elements. The filter() method does not change the original array.

How do you filter an object in JavaScript? ›

JavaScript objects don't have a filter() method, you must first turn the object into an array to use array's filter() method. You can use the Object. keys() function to convert the object's keys into an array, and accumulate the filtered keys into a new object using the reduce() function as shown below.

What are filter actions? ›

Filter actions send information between worksheets. Typically, a filter action sends information from a selected mark to another sheet showing related information. Behind the scenes, filter actions send data values from the relevant source fields as filters to the target sheet.

How do I search an array in React? ›

To find an object in an array in React: Call the find() method on the array, passing it a function. The function should return an equality check on the relevant property. The find() method returns the first value in the array that satisfies the condition.

Which component is used to filter data? ›

tMap Component Joins & Filtering

In our article on the tMap (Transformation) component, we introduced the component and it's core functionality of transforming input data to output data. The tMap component provides much more functionality beyond this, including Joins and Filtering.

How do you filter an onclick array in React? ›

  1. verify this equality check coffee[origin] === [byOrigin] . ...
  2. try this check like this this.state.coffees.filter(coffee => coffee[origin] === byOrigin) ...
  3. Try change to .filter(coffee => coffee.origin === byOrigin)
2 Dec 2019

How do I filter a dropdown list in react JS? ›

The DropDownList has built-in support to filter data items when allowFiltering is enabled. The filter operation starts as soon as you start typing characters in the search box.

How do I reduce React bundle size? ›

Every React developer should add compression to their bundling process. One of the most impactful techniques to reduce the bundle size of a React application is compression. compression is a process in which the size of a file is reduced by re-encoding the file data to use fewer bits of storage than the original file.

How do I reduce the size of a button in React? ›

Button size

To change the size of the default Button to small Button, set the cssClass property to e-small .

How do I make React load faster? ›

21 Performance Optimization Techniques for React Apps
  1. Using Immutable Data Structures. ...
  2. Function/Stateless Components and React. ...
  3. Multiple Chunk Files. ...
  4. Use React. ...
  5. Avoid Inline Function Definition in the Render Function. ...
  6. Throttling and Debouncing Event Action in JavaScript. ...
  7. Avoid using Index as Key for map.
30 May 2022

What is filter and types? ›

Filters serve a critical role in many common applications. Such applications include power supplies, audio electronics, and radio communications. Filters can be active or passive, and the four main types of filters are low-pass, high-pass, band-pass, and notch/band-reject (though there are also all-pass filters).

How does JS array filter work? ›

The JavaScript filter array function is used to filter an array based on specified criteria. After filtering it returns an array with the values that pass the filter. The JavaScript filter function iterates over the existing values in an array and returns the values that pass.

Which function filters the value of an array? ›

The filter() method is an iterative method. It calls a provided callbackFn function once for each element in an array, and constructs a new array of all the values for which callbackFn returns a truthy value.

How do you filter data in an object? ›

keys() to filter an Object. After you've generated the keys, you may use filter() to loop over the existing values and return just those that meet the specified criteria. Finally, you can use reduce() to collect the filtered keys and their values into a new object, for instance.

What is array () in JavaScript? ›

Arrays are Objects

Arrays are a special type of objects. The typeof operator in JavaScript returns "object" for arrays. But, JavaScript arrays are best described as arrays. Arrays use numbers to access its "elements".

Can we sort array of objects in JavaScript? ›

We can sort the array of objects using the sort() method in javascript and then provide a comparison function that will ultimately determine the order of the objects.

What are the 3 types of filtering processes? ›

There are several filtration methods : simple or gravity, hot and vacuum filtrations. The selection of the appropriate method is typically dictated by the nature of the experimental situation.

What is an example of a filter? ›

Filtration Examples

The most common example is making tea. While preparing tea, a filter or a sieve is used to separate tea leaves from the water. Through the sieve pores, only water will pass. The liquid which has obtained after filtration is called the filtrate; in this case, water is the filtrate.

What are filter words examples? ›

Filter words are verbs that increase the narrative distance, reminding us that what we're reading is being told by someone rather than experienced, or shown, through the eyes of the character. Examples include noticed, seemed, spotted, saw, realized, felt, thought, wondered, believed, knew, decided.

What are the array methods in React? ›

Let's discuss a few common JavaScript array methods seen regularly in React.
...
Introduction
  • map()
  • filter()
  • find()
  • reduce()
28 Apr 2021

How do I find an element in an array? ›

  1. If you need the index of the found element in the array, use findIndex() .
  2. If you need to find the index of a value, use indexOf() . ...
  3. If you need to find if a value exists in an array, use includes() . ...
  4. If you need to find if any element satisfies the provided testing function, use some() .
22 Nov 2022

How do you search objects in an array? ›

Searching in an array of objects can be done in Javascript using a loop, Array. find() or Array. findIndex() methods.

What types of filtering methods are used? ›

Types of Filtration
  • Vacuum Filtration. In vacuum filtration, a vacuum pump is used to rapidly draw the fluid through a filter. ...
  • Centrifugal Filtration. This kind of filtration is done by rotating the substance to be filtered at very high speed. ...
  • Gravity Filtration. ...
  • Cold Filtration. ...
  • Hot Filtration. ...
  • Multilayer Filtration.
28 Apr 2017

What are the basic methods of filtering? ›

Two filtration techniques are generally used in chemical separations in general chemistry lab: "gravity" filtration and "vacuum" filtration. with the dominate solvent or solvents in the mixture to be filtered. This step adheres the filter paper to the funnel walls preventing solid from escaping.

How do you filter a list of data? ›

Filter a range of data
  1. Select any cell within the range.
  2. Select Data > Filter.
  3. Select the column header arrow .
  4. Select Text Filters or Number Filters, and then select a comparison, like Between.
  5. Enter the filter criteria and select OK.

How do I change an array in state React? ›

React may batch updates, and therefore the correct approach is to provide setState with a function that performs the update. For the React update addon, the following will reliably work: this. setState( state => update(state, {array: {$push: [4]}}) );

How do you select multiple buttons in React? ›

ButtonGroup supports checkbox type selection in which multiple button can be selected. This can be achieved by adding input element along with id attribute with its corresponding label along with htmlFor attribute inside the target element.

How do you React onClick with multiple things? ›

The first way to perform multiple onClick events in React is to write your logic in a single function, and then call that function inside of the onClick event handler. To learn more about the onClick event handler in React, check out my tutorial on React onClick Event Handling with Examples.

What method is used to filter elements from a collection? ›

Java stream provides a method filter() to filter stream elements on the basis of given predicate. Suppose you want to get only even elements of your list then you can do this easily with the help of filter method.

How do content filters work? ›

Content filtering works by specifying content patterns – such as text strings or objects within images – that, if matched, indicate undesirable content that is to be screened out. A content filter will then block access to this content.

How get data from multiple select dropdown in react JS? ›

How do you select multiple items in react JS?
  1. 1) Create a React Application.
  2. 2) Install React Select package.
  3. 3) Convert App Component from Function to Class.
  4. 4) Adding React Select in Application.
  5. 5) Enable Multi- Selection of Values.
  6. 6) Show Selected Values in Template.
  7. 7) Other Properties of React Select.

How do I search for a dropdown filter? ›

Example Explained

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

What is a good React bundle size? ›

We recommend restricting pages to a maximum of < 300kb of script (compressed). Where possible, use code splitting to break up your code into small chunks of 50KB or less. That way, browsers can download JS resources in parallel, making full use of HTTP 2 multiplexing.

How do I check my bundle size in React? ›

Using webpack-bundle-analyzer

From top to bottom - we can see the name of the bundle (which will match what you see in the network tab), and then the node_modules folder. Inside of that you can see that react-dom takes up the majority of the bundle size and then react takes up a much smaller amount on the right.

How do you lazy load in React? ›

import React from "react"; import { lazyLoader } from "./lazyLoader"; const Customer = lazyLoader(() => import("./Customer. js")); const Admin = lazyLoader(() => import("./Admin. js")); //Instead of regular import statements, we will use the above approach for lazy loading export default (props) => { if (props.

Is React faster than Dom? ›

Conversation. Myth: React is “faster than DOM”. Reality: it helps create maintainable applications, and is *fast enough* for most use cases. Actually VDOM is faster than DOM, what's "slow" in React is the translation from VDOM to DOM.

Can Action Buttons be resized? ›

After an Action button is inserted, you can edit its properties, size, and location as described in the following sections. To edit the properties of an Action button, right-click on the button and select an option from the menu.

How do I change the button font size in React? ›

Unfortunately, according to the documentation (https://reactnative.dev/docs/button) you can't change a font-size of a button. The only style prop you can change is color .

Why react JS is slow? ›

Analytics tracking libraries, excessive CSS animations, non-optimized images, iframes, and many more factors can contribute to poor performance. You can use the Chrome DevTools Performance tab to debug these issues.

Is React faster than CSS? ›

using react may not be mandatory but it will help you have well organized and faster website th... Definitely more organized, but not faster. Nothing is faster than pure HTML, CSS, and vanilla JavaScript.

Why is React so slow? ›

Basically always when your React application is slow it's due to too many components re-rendering or too often. React have very useful Developer Tools, where you can profile your App and then find out which components are taking most of the time to render.

How do you sort an array of objects alphabetically in React? ›

How do you sort an array of objects alphabetically in React?
  1. var items = ['réservé', 'premier', 'communiqué', 'café', 'adieu', 'éclair'];
  2. items. sort(function (a, b) {
  3. return a. localeCompare(b); //using String.prototype.localCompare()
  4. });
  5. // items is ['adieu', 'café', 'communiqué', 'éclair', 'premier', 'réservé']

How do you sort an array of React components? ›

You can use the Array. map method to render the sorted array.
...
To sort an array of objects in React:
  1. Create a shallow copy of the array.
  2. Call the sort() method on the array passing it a function.
  3. The function is used to define the sort order.
22 Apr 2022

How do you filter an array of arrays in React native? ›

To filter an array of objects based on a property:
  1. Call the Array. filter() method on the array.
  2. On each iteration, check if the object's property points to the specific value.
  3. The Array. filter method will return an array with all objects that satisfy the condition.

How do you sort an array of objects? ›

To sort an array of objects in JavaScript, use the sort() method with a compare function. A compare function helps us to write our logic in the sorting of the array of objects. They allow us to sort arrays of objects by strings, integers, dates, or any other custom property.

How do you dynamically sort an array of objects using the dropdown? ›

sort an array of objects. do it dynamically based on different properties values. render this in browser using react. js.
...
The problem could be easily solved with the help of useEffect Hook.
  1. Define another state variable for storing value of the sort property. ...
  2. Update the value of the sortType on select option change.
5 Mar 2020

How do you sort elements in an array? ›

The array can be sorted in ascending order by repeatedly finding the minimum element (considering ascending order) from unsorted part and putting it at the beginning.
...
There are many ways by which the array can be sorted in ascending order, like:
  1. Selection Sort.
  2. Bubble Sort.
  3. Merge Sort.
  4. Radix Sort.
  5. Insertion Sort, etc.
31 May 2021

Which component is used as filter? ›

A filter circuit is generally a combination of inductors (L) and capacitors (C). The filtering action of L and C depends upon the basic electrical principles. A capacitor passes a.c. readily but does not pass d.c. at all. On the other hand, an inductor opposes a.c. but allows d.c. to pass through it.

How sorting is implemented in react JS? ›

First, in a new blank React app, we will create an array of strings which will be our list. Then we will map it out as an unordered list. We will also create the dropdown to select which type of sorting needs to be applied. import { React, useState } from "react"; import "./App.

How do I sort a column in react JS? ›

Sorting the React table data. Now, whenever we click any of the table headers, we can sort that particular column in ascending or descending order. To achieve this, we must use an ordering function that knows how to collate and order items. In this case, we will use the sort() function.

Does filter Remove item from array? ›

The filter() method then returns an array that contains the values from the array that match the currentValue . The values the filter() method returns are not removed from the original array, but that functionality can be added to the function you pass into filter() .

How do I filter a dropdown list in React JS? ›

The DropDownList has built-in support to filter data items when allowFiltering is enabled. The filter operation starts as soon as you start typing characters in the search box.

Videos

1. Reactjs 16 tutorial #18 Handle Nested Object with Map
(Code Step By Step)
2. JavaScript Array Filter Method Practice in 5 Minutes
(James Q Quick)
3. #FeatureFriday: Build an Infinite Input in React
(CheatCode)
4. TypeScript Tutorial #4 - Objects & Arrays
(The Net Ninja)
5. Arrays in React: Removing Elements (095)
(MicroUrb)
6. 🔴 How to work with Array using UseState Hook in React in Hindi
(Thapa Technical)
Top Articles
Latest Posts
Article information

Author: Fredrick Kertzmann

Last Updated: 02/10/2023

Views: 6365

Rating: 4.6 / 5 (46 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Fredrick Kertzmann

Birthday: 2000-04-29

Address: Apt. 203 613 Huels Gateway, Ralphtown, LA 40204

Phone: +2135150832870

Job: Regional Design Producer

Hobby: Nordic skating, Lacemaking, Mountain biking, Rowing, Gardening, Water sports, role-playing games

Introduction: My name is Fredrick Kertzmann, I am a gleaming, encouraging, inexpensive, thankful, tender, quaint, precious person who loves writing and wants to share my knowledge and understanding with you.