React button requiring two presses

Question

My current functional component is requiring me to press a button twice before it runs the nested if statement.

From my current understanding any change of state will re render the whole component, so I believe that is what is stopping the if statement to run straight away.
If that is the problem I am still unsure of how to solve it.

const [ inputData, setInputData ] = useState("Botany") // Example of state
const [ lockInputData, setLockInputData ] = useState("")
const [ prevLockInputData, setPrevLockInputData ] = useState("")

// Button element prop
inputDataSubmit={ () => submitData(inputData) } // On button press this will be called.

const submitData = async (inputData) => {
setLockInputData(inputData);

  if (lockInputData !== "" && lockInputData !== prevLockInputData) {
    await newCat(inputData.replace(/[" "]/g, "_"));
    setPrevLockInputData(lockInputData);
  } else if (lockInputData !== "" && lockInputData === prevLockInputData) {
    await newSubCat(inputData.replace(/[" "]/g, "_"));
  }
}

Component bit where inputDataSubmit is being used:

<form 
  onSubmit={ () => false}
>
  <input
    action=""
    type="text"
    placeholder="Category"
    value={props.inputData}
    onChange={props.handleChange} 
  />
        
  <button
    type="button" 
    onClick={props.inputDataSubmit}
  >
  Random
  </button>
</form>

Feel free to also provide suggestions on coding best practices.

May you also share where you are using inputDataSubmit?

evolutionxbox
– evolutionxbox

2020-07-05 22:13:45 +00:00
Commented Jul 5, 2020 at 22:13 — evolutionxbox
– evolutionxbox, Commented Jul 5, 2020 at 22:13
Alright, I've added that bit too.

Deohgu
– Deohgu

2020-07-05 23:53:03 +00:00
Commented Jul 5, 2020 at 23:53 — Deohgu
– Deohgu, Commented Jul 5, 2020 at 23:53

Daniele Ricci · Accepted Answer · 2020-07-05 22:28:04Z

1

I think because setState could be asynchronous (and setLockInputData is a setState).

You could try:

const submitData = async (inputData) => {
  setLockInputData(inputData);

  if(inputData !== "") {
    if(inputData !== prevLockInputData) {
      await newCat(inputData.replace(/[" "]/g, "_"));
      setPrevLockInputData(inputData);
    }
    else
      await newSubCat(inputData.replace(/[" "]/g, "_"));
  }
}

Hope this helps.

answered Jul 5, 2020 at 22:28

Daniele Ricci

15.9k1 gold badge32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React button requiring two presses

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related