React JS search in Array (character by character)

Question

This is my first program in React. I've as below:

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name : ''
    }
  }
  render() {
  return (
   <>
      <div>
      <label for="searchEmp">Search Person: </label>
      <input type="text" value={this.state.name} id="searchEmp" 
      placeholder="Enter Person's Name" 
      onChange={event => this.setState({name: event.target.value})}/><br/>
      </div>
      {["John","Steve","Alen","Stephen",
      "Smith","Alex","Jack","Andy","Jacky"].map(item => {
      return <div>{item}</div>})}
    </>
    );
  }
}
export default App;

In Output, I've something like as

I want to filter this list character by character. For e.g. When I enter S the list should filtered with names starting from S as below:

Next, If I enter t after S the list should contain only names as:

and so on. How can I get this? Apart, as a newbie to React, Is my code okay? Thanks in advance.

Answer 1

So, first of all I think the good practice would be ti either keep the list as constant one if it's fixed or some variable at class level,

Scenario you are asking for is preety much like you want to filter out the list each time, so you can filter out the list kept in variable using a function & could return the list from the function to use

let namesList = ['ab', 'fg', 'test'];

input = 'a';

let rgxp = new RegExp(input, "g");

function findFilterNames() {
 return namesList.filter(x => x.match(rgxp));
}

test = findFilterNames();
console.log(test);

Answer 2

I'll try my best to answer but apologies in advance if this doesn't work, I've just started to learn React as well.

Whenever you use setState, the component will re-render itself, so keeping that in mind, you could use the following:

Create a function that looks for this.state.name and checks to see if its blank or has an actual value. If it does have a value, it will either use filter or map to run through the name array and return div elements with the values placed inside. See code below:

class App extends React.Component {

constructor(props) {
    super(props)
    this.state = { name: '' };
  }

renderNames() { 
this.names =["John","Steve","Alen","Stephen","Smith","Alex","Jack","Andy","Jacky"];
if(this.state.name !== '') {
   return this.names.map((name) => { 
     if (name.includes(this.state.name)){
       return <div>{name}</div>;
     }
   });
} else {
   return this.names.map((name) => { 
       return <div>{name}</div>;
   });
}
}

  render() {
  return (
   <>
      <div>
      <label for="searchEmp">Search Person: </label>
      <input type="text" value={this.state.name} id="searchEmp" 
      placeholder="Enter Person's Name" 
      onChange={event => this.setState({name: event.target.value})}/><br/>
      </div>
      {this.renderNames}
    </>
    );
  }
  }

Answer 3

I will keep it simple and easy, you must use a function in Javascript called filter() with includes() function.

I will assume the search term that coming from the input called term, and the array that you need to filter it called names

 const names = ["John","Steve","Alen","Stephen","Smith","Alex","Jack","Andy","Jacky"];

 let term = "s";

 const searchResults = names.filter(name => {
                        return name.toLowerCase().includes(term.toLowerCase());
                    });
// the result will be array that contain the following ["Steve","Stephen","Smith"]

when you consloe.log(searchResults) you will have ["Steve","Stephen","Smith"] because term value is "s" so you get the all names that have "s" character.

We change the array items to lowercase using toLowerCase() to avoid the case-senstive if there is character upper case

you can test the code here just put the name of the filtered searchResults at the end of the code

I see this way as the fastest way to search by character.

this is a repo as an example using Reactjs : https://github.com/Tawfeekamr/react-search-in-array-character-by-character.git