CODEWITHSUNDEEP
reactjsnumberslivesearch
Srećko Ljubić
Srećko Ljubić

Reputation: 1

Insert number into livesearch ReactJS

I am working on my first app in ReactJS. As a beginner I ran into a problem. My app is phonebook so I have livesearch to display recommended data. For strings everything works well, but when I want to create option "Search By Number" my app dosen't work. So can you show me what and where should I do to resolve a problem. Problem is in wrong regEx? I try with this: const pattern = /^[0-9\b]+$/ , where should I put this?

Thanks for your help!

Error: TypeError: index.number.match is not a function (anonymous function)

This is my code:

import React, {useState, useEffect} from 'react'
import '../CSS/App.css';
import axios from 'axios';

export default function Number() {
    const [numberList, setNumberList] = useState([]);    
    const [text, setText] = useState("");
    const [suggestions, setSuggestions] = useState([]);
    const [showNumber, setShowNumber] = useState([]);
  

    useEffect(() => {
        const loadNumbers = async () => {
            const response = await axios.get("http://localhost:3001/numbers");
            setNumberList(response.data);
            
        };
        loadNumbers();         
        
    }, [])
    
 
    const onChangeHandler = (text) => {
        let matches = [];
        if (text.length > 0 ) {
            matches = numberList.filter((index) => {               
                const regex = new RegExp(`${(text)}`, "gi");                
                return index.number.match(regex);                
            })
            
        }
        console.log('matches', matches);
        setSuggestions(matches);
        setText(text);
                  
    }    
}

And this is part of my API: http://localhost:3001/numbers

{"id":1,"name":"Voditelj","number":26327,"visible":true,"active":true,"createdAt":"2021-11-12T15:36:51.000Z","updatedAt":"2021-11-12T15:36:51.000Z","DepartmentId":1,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":1,"departmentTitle":"Služba za informatiku","alias":"INF","createdAt":"2021-10-29T10:14:32.000Z","updatedAt":"2021-10-29T10:14:32.000Z","RegionId":1}},{"id":2,"name":"Voditelj","number":26333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:42.000Z","updatedAt":"2021-11-12T15:37:42.000Z","DepartmentId":2,"RegionId":1,"Region":{"id":1,"regionTitle":"Firule","createdAt":"2021-10-29T10:11:40.000Z","updatedAt":"2021-10-29T10:11:40.000Z"},"Department":{"id":2,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:47.000Z","updatedAt":"2021-10-29T10:14:47.000Z","RegionId":1}},{"id":3,"name":"Voditelj","number":27333,"visible":true,"active":true,"createdAt":"2021-11-12T15:37:52.000Z","updatedAt":"2021-11-12T15:37:52.000Z","DepartmentId":3,"RegionId":2,"Region":{"id":2,"regionTitle":"Križine","createdAt":"2021-10-29T10:11:46.000Z","updatedAt":"2021-10-29T10:11:46.000Z"},"Department":{"id":3,"departmentTitle":"Služba za tehničke poslove","alias":"TEH","createdAt":"2021-10-29T10:14:51.000Z","updatedAt":"2021-10-29T12:20:43.000Z","RegionId":2}}

Upvotes: 0

Views: 25

Answers (1)

Srećko Ljubić
Srećko Ljubić

Reputation: 1

So I found a mistake. Stupid mistake.

const onChangeHandler = (text) => { 
        let matches = [];
        
        if (text.length > 0 ) {
            matches = numberList.filter((index) => {                             
                const regex = new RegExp(`${(text)}`, "gi");                          
                return index.number.toString().match(regex); //toString has been missing               
            })
            
        }
        console.log('matches', matches);
        setSuggestions(matches);
        setText(text);
                  
    }

Upvotes: 0

Related Questions