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

Javascript – how can i use hooks like 'useState' in async , await server component?

'use client'
async function Teachers (){
    const response = await fetch('http://localhost:8000/teachers',
        
    })
    const data = await response.json();
    const [showNames , setShowNames] = useState(false);

    const teacherHandler = ()=>{
    setShowNames (!showNames)
}
    return (
        
    <div className="mt-10">
        <div className=" text-center font-DanaDemiBold text-3xl text-white">
            <h1 className="w-full bg-slate-900 mb-5">Teachres</h1>
            <button onClick={teacherHandler} className="p-3 bg-green-600 rounded-lg mt-5">Show/Hide Teachers Name</button>
     );
        </div>
        <div className=" flex justify-center items-center flex-wrap p-2 gap-3 my-10 ">
            {
            !showTeachers?null :
            data.map(item=>(      
            <div key={item.id} className=" w-1/3 h-[300px] flex justify-between items-center shadow-lg bg-slate-300 rounded-lg  ">
                <div className="flex flex-col m-10 gap-y-5">
                <div className="flex gap-x-2">
                    <h3> Name: </h3>
                    <span>{item.firstname}</span>
                    <span>{item.lastname}</span>
                </div>
                <div className="flex gap-x-2">
                    <h3>    Email: </h3>
                    <span>{item.email}</span>
                </div>
                <div className="flex gap-x-2">
                    <h3>  Date of Birth: </h3>
                    <span>{item.birthDate}</span>
                </div>
                <div className="flex gap-x-2">
                    <h3>   phone: </h3>
                    <span>{item.mobile}</span>
                </div>
                <div className="flex gap-x-2">
                    <h3>     Address: </h3>
                    <span>{item.address}</span>
                </div>
                </div>
                <div className="w-36 h-36 m-10">
                    <img className="rounded-full" src={item.profileImg} alt="profile"/>
                </div>
            </div>
     ))}
   </div>
    </div>
    
    )
}

export default Teachers;

Thank for Your Answers. Please help me, I cant use Button and the function that handle button and I receive this error: Error: async/await is not yet supported in Client Components, only Server Components. Error: async/await is not yet supported in Client Components, only Server Components.

Tags:

2

Answers


  1. 0

    The error you’re encountering is due to the use of async/await in a client component. Currently, Next.js does not support async/await in client components.

    To resolve this issue, you can move the data fetching to a server component or use the getServerSideProps or getStaticProps function to fetch the data at build time or on each request. Here’s an example of how you can do it:

    import { useState } from 'react'; export async function getServerSideProps() {const response = await fetch('http://localhost:8000/teachers');const data = await response.json();return {props: {initialData: data,},};}function Teachers({ initialData }) {const [showNames, setShowNames] = useState(false);const [data, setData] = useState(initialData);const teacherHandler = () => {setShowNames(!showNames);};/*Rest of your component*/}export default Teachers;

    In this example, getServerSideProps fetches the data from the server before the page is rendered. The fetched data is then passed to your component as a prop. This way, you can avoid using async/await in your component. Remember to replace ‘http://localhost:8000/teachers’ with your actual API endpoint.

    Login or Signup to reply.
  2. 0

    Next.js does not support async Client component, so you may think of using server component instead, but then a new issue will arise, server component does not support event listeners.

    So the easiest way to use async in client component is to add useEffect to handle side effects, then set the data in state to use it.

    Note: you should always handle errors when dealing with API’s, Try-Catch is not enough tho.

    "use client";
function Teachers() {
  const [showNames, setShowNames] = useState(false);
  const [studentsData, setStudentsData] = useState();
  // use it to call async function
  useEffect(() => {
    getData();
  }, []);

  async function getData() {
    try {
      const response = await fetch("http://localhost:8000/teachers");
      const data = await response.json();
      setStudentData(data);
    } catch (error) {
      console.error(error);
    }
  }
  const teacherHandler = () => {
    setShowNames(!showNames);
  };
  return (
    <div className="mt-10">
      <div className=" text-center font-DanaDemiBold text-3xl text-white">
        <h1 className="w-full bg-slate-900 mb-5">Teachres</h1>
        <button
          onClick={teacherHandler}
          className="p-3 bg-green-600 rounded-lg mt-5"
        >
          Show/Hide Teachers Name
        </button>
        );
      </div>
      <div className=" flex justify-center items-center flex-wrap p-2 gap-3 my-10 ">
        {!showTeachers
          ? null
          : studentDatas.map((item) => (
              <div
                key={item.id}
                className=" w-1/3 h-[300px] flex justify-between items-center shadow-lg bg-slate-300 rounded-lg  "
              >
                <div className="flex flex-col m-10 gap-y-5">
                  <div className="flex gap-x-2">
                    <h3> Name: </h3>
                    <span>{item.firstname}</span>
                    <span>{item.lastname}</span>
                  </div>
                  <div className="flex gap-x-2">
                    <h3> Email: </h3>
                    <span>{item.email}</span>
                  </div>
                  <div className="flex gap-x-2">
                    <h3> Date of Birth: </h3>
                    <span>{item.birthDate}</span>
                  </div>
                  <div className="flex gap-x-2">
                    <h3> phone: </h3>
                    <span>{item.mobile}</span>
                  </div>
                  <div className="flex gap-x-2">
                    <h3> Address: </h3>
                    <span>{item.address}</span>
                  </div>
                </div>
                <div className="w-36 h-36 m-10">
                  <img
                    className="rounded-full"
                    src={item.profileImg}
                    alt="profile"
                  />
                </div>
              </div>
            ))}
      </div>
    </div>
  );
}

export default Teachers;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search