React List Components

Updated April 13, 2023

Introduction to React List Components

Being an app developer on React Native, React Native List Components is a very important skill to have. React Native List Components helps us in displaying a list of items in React’s JSX syntax. There are various things that we can do using List Components such as rendering a list of primitives, rendering a list of complex objects and even updating the state of lists automatically. This article will give you a better understanding of Native List Components. The examples will help you in understanding how it works and how it can be used according to the differing requirements of the App.

Using Various React List Components

Following are the examples are given below:

1. Basic React List Component with Filter

Components inside src folder:

• FilteredList.js
• Hello.js
• List.js
• index.js

FilteredList.js

import React from 'react'
import List from './List'
class FilteredList extends React.Component{
constructor() {
super()
this.state = {
initialItems: [
'Data Science',
'Data Analysis',
'Tableau',
'Power BI',
'React Native',
'React',
'Swift',
'Excel',
'SQL',
'Big Data'
],
items: []
}
this.setState({ items: this.state.initialItems })
this.filterList = this.filterList.bind(this)
}
filterList(e) {
let updatedList = this.state.initialItemsupdatedList = updatedList.filter(item => {
return (
item.toLowerCase().search(e.target.value.toLowerCase()) !== -1
)
})
this.setState({ items: updatedList })
}
render() { return (
<div>
<form>
<fieldset>
<input
type="text" placeholder="Search Here"
onChange={this.filterList} backgroundColor= '#c93e5f'
/>
</fieldset>
</form>
<List items={this.state.items} />
</div>
)
}
}
export default FilteredList

Hello.js

import React from 'react';
export default ({ name }) =><h1>Welcome {name}!</h1>;

List.js

import React from 'react'
class List extends React.Component{ render(){
return(
<ul>
{this.props.items.map(item => { return <li key={item}>{item}</li>
})}
</ul>
)
}
}
export default List

index.js

import React from 'react'
import { render } from 'react-dom'
import FilteredList from './FilteredList'
const styles = { fontFamily: 'sans-serif', textAlign:'center'
}
const App = () => (
<div style={styles}>
<h2>Basic React List Component with Filter</h2>
<FilteredList />
</div>
)
render(<App />, document.getElementById('root'))

Output:

2. Basic React List Component with Button with details

Components inside src folder:

• index.js
• person.js
• persons.js
• styles.css

index.js

import React from "react";
import reactDom from "react-dom";
import Persons from "./persons.js";
import Person from "./person.js";
import "./styles.css";
const persons = [
{ id: 1, name: "Ram", gender: "Male", age: 23 },
{ id: 2, name: "Sita", gender: "Female", age: 26 },
{ id: 3, name: "Rahul", gender: "Male", age: 45 }
];
class App extends React.Component{ state = {
id: 0
};
setPerson = newId =>{ console.log(newId); this.setState({
id: newId
});
};
render() { return (
<div>
<Persons list={persons} person={this.setPerson} />
{this.state.id ? (
<Person person={persons.find(each => each.id == this.state.id)}
/>
) : null}
</div>
);
}
}
reactDom.render(<App />, document.getElementById("root"));

person.js

import React from "react";
export default class Person extends React.Component{
render(){
return(
<div>
<span>Name: {this.props.person.name}</span>
<span>Gender: {this.props.person.gender}</span>
<span>Age: {this.props.person.age}</span>
</div>
);
}
}

persons.js

import React from "react";
export default class Persons extends React.Component{
handleClick = e => {
this.props.person(e.target.value);
};
render(){
let list =this.props.list; return(
<div>
<div>Important People of Our Organisation</div>
{}
<div>
{list.map(each => (
<span>
<li key={each.id}>
{each.name}
<button onClick={this.handleClick} value={each.id}> Click to see details
</button>
</li>
</span>
))}
</div>
</div>
);
}
}

styles.css

.App {
font-family: sans-serif; text-align: center;
}
span {
padding: 11px;
}
button {
display: inline; margin: 11px;
}

Output:

3. Advance ReactList

Components inside src folder:

• Detail.js
• List.js
• index.js
• styles.css

Detail.js

import React, { useState } from "react"; import { Link } from "react-router-dom";
function Detail({ match: {
params: { id }
}
}) {
const [data] = useState({ title: "Item" }); return (
<div className="container">
<div className="card">
<h1>{data.title}</h1>
<h3>ID: {id}</h3>
<Link to="/">Click for the List View</Link>
</div>
</div>
);
}
export default Detail;

List.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
function List() {
const [data] = useState([
{ id: "24240"
, title: "Commodity 1" },
{ id: "25250"
, title: "Commodity 2" },
{ id: "26260"
, title: "Commodity 3" },
{ id: "27270"
, title: "Commodity 4" }
]);
return (
<div className="container">
<ulclassName="list">
{data.map(item =>(
<li key={item.id}className="list-item">
<Linkto={item.id}>{item.title}</Link>
</li>
))}
</ul>
</div>
);
}
export default List;

index.js

import React from "react";
import ReactDOM from "react-dom"; import { BrowserRouter as Router
, Route } from "react-router-dom"; import List from "./List";
import Detail from "./Detail"; import "./styles.css";
function App() { return (
<Router className="App">
<Route exact path="/" component={List} />
<Route path="/:id" component={Detail} />
</Router>
);
}
constrootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

body {
background-color: #e7ffb0;
font-family: "Roboto", sans-serif;
}
.App {
font-family: sans-serif; text-align: center;
}
.container { margin: 0 auto; width: 641px; max-width: 81%;
}
.list {
list-style: none;
}
.list-item {
background-color: #deb1f0; margin: 9px;
padding: 1.5rem; border-radius: 5px;
}
.list-item a {
font-size: 1.75rem; text-decoration: none; color: #2b2530;
}
.card {
background-color: #9de7fc; margin: 9px;
padding: 2.5rem; border-radius: 5px;
}

Output:

4. Interactive List with Select

Components used:

• stylesfolder
• Hello.js
• index.html
• index.js

Components inside styles folder:

example.css

.interactive-list-select { font-size: 19px;
width: 100%;
height: 2.26em;
border: 2px solid #b0ffd4; box-sizing: border-box; outline: 1;
}
.delete {
white-space: nowrap; width: 2%;
padding: 0 6px;
}

Hello.js

import React from 'react';
export default ({ name }) =><h1>Welcome {name}!</h1>;

index.html

<div id="root"></div>

index.js

import React from "react";
import ReactDOM from "react-dom";
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import InteractiveList from "react-interactive-list";
import "react-interactive-list/lib/styles/react-interactive-list.css"; import './styles/example.css';
class Application extends React.Component{ constructor() {
super();
this.state = { options: [],
values: {}
};
this.renderInput = this.renderInput.bind(this); this.onRemoveItem = this.onRemoveItem.bind(this);
}
componentDidMount() { this.setState({
options: ['India', 'Turkey', 'United Arab Emirates', 'Indonesia'].map((country) => {
return { label: country, value: country };
})
});
}
renderInput(props, removable, uniqueId, index, onChangeCallback) { return (
<Select options={props.options} className='interactive-list-select' value={this.state.values[uniqueId]} onChange={
(selectedItem) => {
let newValues = this.state.values; newValues[uniqueId] = selectedItem; this.setState({values: newValues});
onChangeCallback(selectedItem);
}
} />
);
}
onRemoveItem(uniqueId, value) { deletethis.state.values[uniqueId];
this.setState({
values: this.state.values
});
console.log(this.state.values);
}
render() { return (
<InteractiveListonRemoveItem={this.onRemoveItem} renderItem={this.renderInput} placeholder="Some Text" maxItems={3} options={this.state.options}
/>
);
}
}
ReactDOM.render(<Application />, document.getElementById("root"));

Output:

Conclusion

The first example helps us to understand how to create a Native List with a filter. The second example was how to create a list that has a button and displays some details once they are clicked. The other two examples were on Advance List and Components with Select. In Native List with select, we were able to add a country name from a list of options, and multiple additions were also supported which was a cool thing to do. These examples are basic in nature but will give you a better understanding of creating more complex list components.

Recommended Articles

This is a guide to React List Components. Here we also discuss the introduction and its various components along with different examples and its code implementation. You may also have a look at the following articles to learn more –

1. React Native Local Storage
2. React Native ListView
3. React-Native Calendar
4. React Native Router