How can I handle search queries in react js?

Question

I have my node js server up and running and I handle query requests like this :

controller.js

const getUsers = async (req, res, next) => {
    const age = req.query.age || 1;
    const lessage = req.query.minAge || 1000000000;
    const search = req.query.s || '';
    let users;
    try {
        users = await User.find({ age: { $gt: age, $lt: lessage }, name: { $regex: search } });
    } catch (e) {
        console.log('Could not find users : ' + e);
        next(e);
    }
    res.json(users);
};

I check if there is query value in the url then use that in mongoose find() method if not use the default value .

Now my question is how can I handle or basically send these queries in react with radio buttons and inputs and checkboxes ? I've tried to handle it without any library and everytime I missed something or got caught up in a bug .

I tried like this :

    const what = loc.length < 1 ? '?' : '&';
    const [ name, setName ] = React.useState('');
    const [ searchName, setSearchName ] = React.useState('');
    const [ radio, setRadio ] = React.useState('');
    const [ place, setPlace ] = React.useState('');
<select
                onChange={(e) => {
                    setPlace(e.target.value);
                    setLoc((prev) => prev + place);
                }}
            >
                <option value="">Select place</option>
                <option value={`${what}place=us`}>US</option>
                <option value={`${what}place=uk`}>UK</option>
            </select>
            {place}
            <form
                onChange={(e) => {
                    setRadio(e.target.value);
                    setLoc((prev) => prev + radio);
                }}
            >
                <input type="radio" name="gender" value={`${what}age=22`} /> Age over 22 <br />
                <input type="radio" name="gender" value={`${what}ageMin=22`} /> Age lower than 22 <br />
            </form>
            {radio}
            <input
                type="text"
                value={name}
                onChange={(e) => {
                    setName(e.target.value);
                }}
            />

There is no tutorial nor an article on how to send multiple query requests with different options in react .

So How can I handle sending query requests to the backend with react js ?

score 0 · Accepted Answer · answered Aug 20 '20 at 06:37

I handled the query values first setting values with react useState hook like this :

    const [ name, setName ] = React.useState('');
    const [ age, setAge ] = React.useState('');
    const [ place, setPlace ] = React.useState('');

            <select
                onChange={(e) => {
                    setPlace(e.target.value);
                }}
            >
                <option value="">Select place</option>
                <option value="us">US</option>
                <option value="uk">UK</option>
            </select>
            {place}
            <br />
            <form
                onChange={(e) => {
                    setAge(e.target.value);
                }}
            >
                <input type="radio" name="gender" value="ageMax=22" /> Age over 22 <br />
                <input type="radio" name="gender" value="ageMin=22" /> Age lower than 22 <br />
            </form>
            {age}
            <br />
            <input
                type="text"
                value={name}
                onChange={(e) => {
                    setName(e.target.value);
                }}
            />
           {name}

Then I made a condition for Link's to prop like this :

<Link to={handleSearch}>Filter</Link>

    const handleSearch = () => {
        if (place.length === 0 && name.length === 0) {
            return `?${age}`;
        }

        if (age.length === 0 && name.length === 0) {
            return `?place=${place}`;
        }

        if (age.length === 0 && place.length === 0) {
            return `?s=${name}`;
        }

        if (age.length === 0) {
            return `?s=${name}&place=${place}`;
        }
        if (place.length === 0) {
            return `?s=${name}&${age}`;
        }
        if (name.length === 0) {
            return `?${age}&place=${place}`;
        }

        return `?s=${name}&${age}&place=${place}`;
    };

How can I handle search queries in react js?

1 Answers1