Question 284473 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – trying to get Arabic word in Nextjs Router – Params

I am trying to filter the data and i pass the search value to the router, but the search Value is in Arabic and this is what i get.
Arabic Search Value here

however, when i try the same thing in English i get the required result.

English Search Value

what do i need to do to get the filtered data in Arabic?

Here is my search box

"use client";
import React, { useState } from "react";
import { useRouter } from "next/navigation";
const SearchBar = () => {
  const [search, setSearch] = useState("");
  const router = useRouter();
  const handleSubmit = (e) => {
    e.preventDefault();
    if (!search) return;
    router.push(`./SearchMeal/${search}`);
  };
return (
    <div className="xl:flex hidden justify-between w-[90%] my-5 pt-6 px-2 pb-2 ">
      
      <div className="flex-1 ">
        <form onSubmit={handleSubmit} className="">
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            type="text"
            placeholder="بحث عن وصفة"
            className="p-2 border-accent outline-none rounded-md text-center placeholder-gray-500  bg-slate-100 "
          />
          <div className="flex justify-center mt-2">
            <button
              disabled={!search}
              type="submit"
              className="p-2 w-[80%] border-none outline-none rounded-md bg-accent text-primary font-bold text-base cursor-pointer disabled:cursor-none disabled:text-gray-100 disabled:bg-gray-400"
            >
              بحث
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default SearchBar;

and here is my search result page

"use client";
import { useState, useEffect } from "react";
const SearchMeal = ({ params }) => {
  
  const [searchTerm, setSearchTerm] = useState(params.searchTerm);
return (
    <div className="flex flex-col  w-full self-center justify-center border border-solid">
      <input
        value={searchTerm}
        className="w-1/2 flex self-center mt-5 rounded-md p-2 text-center"
        type="text"
        placeholder="بحث عن وصفة"
        autoFocus
        onChange={(event) => setSearchTerm(event.target.value)}
      />
      <div>
        {MEALS.filter((val) => {
          if (params.searchTerm == "") {
            return val;
          } else if (
            val.title.toLowerCase().includes(searchTerm.toLowerCase())
          ) {
            return val;
          }
        }).map((item) => {
          return (
            <div className="flex justify-center">
              <MealsListCard mealsList={item} />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default SearchMeal;

when i filter the data without passing the search value to the router, it works fine and i get the filtered data, but itis not working when pushing it with the router.
any help will be appreciated

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    here is how i fixed it. 1- i changed the button to a link and removed the handle submit function. here is the updated search bar

    "use client";
import React, { useState } from "react";
import Link from "next/link";
const SearchBar = () => {
  const [search, setSearch] = useState("");
   return (
    <div className="xl:flex hidden justify-between w-[90%] my-5 pt-6 px-2 pb-2">
  <div className="flex-1 ">
    <form className="">
      <input
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        type="text"
        placeholder="بحث عن وصفة"
        className="p-2 border-accent outline-none rounded-md text-center placeholder-gray-500  bg-slate-100 "
      />
      <div className="flex justify-center mt-2">
        <Link
          href={{
            pathname: "./SearchMeal",
            query: { search: search },
          }}
          className={` ${
            search.length <= 0
              ? "no-underline text-center p-2 w-[80%] border-none outline-none rounded-md font-bold text-base cursor-none text-gray-100 bg-gray-400"
              : "no-underline text-center p-2 w-[80%] border-none outline-none rounded-md bg-accent text-primary font-bold text-base cursor-pointer disabled:cursor-none "
          }`}
        >
          بحث
        </Link>
      </div>
    </form>
  </div>
</div>);};

export default SearchBar;

    then created another component search box

    "use client";
import React from "react";
import { useState, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import MealsListCard from "../../components/UI/Card/MealsListCard";
const SearchBox = () => {
  const searchParams = useSearchParams();
  const searchWord = searchParams.get("search");
  const [searchTerm, setSearchTerm] = useState(searchWord);
  return (
<div className="flex flex-col  w-full self-center justify-center border border-solid">
  <input
    value={searchTerm}
    className="w-1/2 flex self-center mt-5 rounded-md p-2 text-center"
    type="text"
    placeholder="بحث عن وصفة"
    autoFocus
    onChange={(event) => setSearchTerm(event.target.value)}
  />
  <div>
    {MEALS.filter((val) => {
      if (searchParams.search == "") {
        return val;
      } else if (
        val.title.toLowerCase().includes(searchTerm.toLowerCase())
      ) {
        return val;
      }
    }).map((item) => {
      return (
        <div className="flex justify-center">
          <MealsListCard mealsList={item} />
        </div>
      );
    })}
  </div>
</div>);};

export default SearchBox;

    and finally the search result page in server side not client side

    import SearchBox from "../components/SearchBox/page";
const SearchMeal = () => {
   return (
    <div>
     <SearchBox />
    </div>
  );
 };

export default SearchMeal;

    and finally, i got the result as shown in the image below enter image description here


  2. 0

    You need to use query params for that purpose.

    const handleSubmit = (e) => {
    e.preventDefault();
    if (!search) return;
    router.replace({ query: { search } });
  }

    and you can read that change using

    router.query.search

    It will return the data with correct formatting

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search