React hook "useState" error

[mftaa]

Summary

hi , i make a modal in next js with react modal. in here i use a useState for the modal. i finish my work and will build this app, when i build an error showed up like this . "React Hook "useState" is called in function "page" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". how this possible? in development all looks good. btw the modal is on the page

Additional information

"use client";
import NewSidebar from "@/components/sidebar";
import Link from "next/link";

import React, { useState } from "react";
import Modal from "react-modal";

export default function page() {
  const customStyles = {
    content: {
      top: "50%",
      left: "50%",
      right: "auto",
      bottom: "auto",
      marginRight: "-50%",
      transform: "translate(-50%, -50%)",
    },
  };
  const [modalIsOpen, setIsOpen] = useState(false);

  function openModal() {
    setIsOpen(true);
  }

  function afterOpenModal() {
    // references are now sync'd and can be accessed.
  }

  function closeModal() {
    setIsOpen(false);
  }

  return (
    <div className="flex flex-row">
      <NewSidebar />

      <div className="card bg-base-100 w-full mx-3 my-3">
        <div className="card-body">
          {/* Open the modal using ID.showModal() method */}
          <Link href="/dashboard/usp/master/anggota/add">Tambah Anggota</Link>
          <table className="table">
            <thead>
              <tr>
                <th>Nama</th>
                <th>No</th>
                <th>NIK</th>
                <th>Golongan Anggota</th>
                <th>Grup Anggota</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>john doe</td>
                <td>0867432423987</td>
                <td>330389278736765</td>
                <td>Golongan I</td>
                <td>PNS</td>
                <td>
                  <button onClick={openModal} className="btn">
                    Edit
                  </button>
                  <Modal
                    isOpen={modalIsOpen}
                    onAfterOpen={afterOpenModal}
                    onRequestClose={closeModal}
                    style={customStyles}
                    contentLabel="Example Modal"
                  >
                    <div className="flex flex-col px-10 py-10 gap-2">
                      Nama Anggota
                      <input
                        type="name"
                        placeholder="Type here"
                        className="input input-bordered w-full max-w-xs"
                      />
                      BlackList
                      <div className="flex flex-row">
                        ya
                        <input
                          type="radio"
                          name="radio-1"
                          className="radio"
                          checked
                        />
                        tidak
                        <input type="radio" name="radio-1" className="radio" />
                      </div>
                      Barcode
                      <input
                        type="name"
                        placeholder="Type here"
                        className="input input-bordered w-full max-w-xs"
                      />
                      NIP
                      <input
                        type="name"
                        placeholder="Type here"
                        className="input input-bordered w-full max-w-xs"
                      />
                      Grup Anggota
                      <select className="select select-bordered w-full max-w-xs">
                        <option>PNS</option>
                        <option>Non PNS</option>
                        <option>Koperasi</option>
                      </select>
                    </div>

                    <button className="btn" onClick={closeModal}>
                      close
                    </button>
                  </Modal>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Example

No response

[devjiwonchoi]

Your Page Component page should be Page and this is jsx format convention.
It is because React uses createElement by the name of your component, and if you name your component page, jsx will read it as <page /> and in which the jsx will understand it as an HTML format.

<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)

This is why you need to use Uppercase to the naming of the React Component.

Example:

// ...

export default function Page() {

// ... rest of the code

Reference

• User-defined Components Must be capitalized
• React Component names must begin with capital letters

[mftaa]

if i rename the component, the page is not detected and show a 404 not found page because in next js, folders are used to define routes

[mftaa]

oh its work, i just replace the export default function page to export default function Page . and dont rename the file. thanks.

[devjiwonchoi]

Right, the filename should stay as page.js | jsx | tsx.

[AbdullahAA7]

thank you both of you this discussion help us alot