React - Can't update state using setState inside onClick-CodePudding

I can't update my state using setState inside an onClick event on a button. I try to put and console.log inside the function and it work, but the setState doesn't work

I've tried two approaches, one is :

<button onClick={() => setColEdit("")} className="bg-red-500 text-white p-1">
    <i className="pi pi-times"></i>
</button>

two is :

const cancelEdit = () => {
    setColEdit((edit) => edit = "123")
}
<button onClick={cancelEdit} className="bg-red-500 text-white p-1">
    <i className="pi pi-times"></i>
</button>

I try to put console.log inside the arrow function and it works, but the state isn't updated

I don't know what's wrong with my code or if there is something I don't know about how the setState works. Or there is another solution to my problem? Thanks

EDIT So sorry, here is the full code

import { useState } from "react"
import { NumericFormat } from "react-number-format"

const Component: NextPageWithLayout= () => {

const [colEdit, setColEdit] = useState("")

const cancelEdit = () => {
    setColEdit("")
}

return (
    <span onClick={() => setColEdit("sk_123")}>
        {colEdit == "sk_123" ? (
        <form className="flex items-center gap-1">
            <input type={'text'} defaultValue={1000} autoFocus />
            <button onClick={cancelEdit} className="bg-red-500 text-white p-1">
                <i className="pi pi-times"></i>
            </button>
        </form>
                                                                                
    ) : (
        <NumericFormat
            value={1000}
            prefix="Rp "
            displayType='text'
            thousandSeparator='.'
            decimalSeparator=','
        />
    )}
    </span>

CodePudding user response：

Hope your general component structure has atlease these codes:

 const [col, setColEdit] = useState(1);

Full sample code:

import { useState } from "react";

export default function App() {
  const [col, setColEdit] = useState(1);

  return (
    <div className="App">
      <button
        onClick={() => setColEdit("")}
        className="bg-red-500 text-white p-1"
      >
        <i className="pi pi-times">Click</i>
      </button>
      <h1>My Col Edit value is - {col}</h1>
    </div>
  );
}

CodePudding user response：

It has to be a problem with your useState declaration

Here's a working example with 3 ways of doing what you are trying to do

https://codesandbox.io/s/upbeat-leakey-m4lgrd

import { useState } from "react";

export default function App() {
  // use state declaration must look like this
  const [colEdit, setColEdit] = useState("zero");

  const handleClickOne = (e) => {
    setColEdit((previous) => (previous = "one"));
  };

  const handleClickTwo = (e) => {
    setColEdit("two");
  };

  return (
    <div className="App">
      <h1>{colEdit}</h1>
      <button onClick={handleClickOne}>One ?</button>
      <button onClick={handleClickTwo}>Two ?</button>
      <button onClick={() => setColEdit("three")}>Three ?</button>
    </div>
  );
}

CodePudding user response：

Please check your state.

import { useState } from "react";
export default function App() {
  // Please check your state there must be an issue.
  const [colEdit, setColEdit] = useState("initialValue");

  const handleClick = (e) => {
    setColEdit("");
  };

  return (
    <div className="App">
      <button onClick={handleClick} className="bg-red-500 text-white p-1">
           <i className="pi pi-times"></i>
      </button>
    </div>
  );

}