How to change, using React, the value of a form input after clicking the submit button

Question

I'm new to React. I was writing a simple form, using useState and useReducer hooks. After typing in the input field a number ex. 5, and submitting the form, my textField value shown on top of the HTML page equals 16. I would like this number to automatically be inserted as a new initial state or value in the input field. I tried to do this by typing: value={textField} but in that case I am not able to modify the input field on the HTML page.

import React, {useReducer, useState} from "react";

export default function App(){
    const [text, setText] = useState(0);

    console.log(text)
    function handleChange(e) {
        e.preventDefault();
        setText(e.target.value)
    }

    function onSubmit(e){
        e.preventDefault()
        setTextField()
    }

    const [textField, setTextField] = useReducer(

        (textField) => {
            textField = text;
            if (textField === 1){
                textField=1;
            }else if (textField%2 === 0){
                textField = textField/2
            }else if (textField%2 !== 0){
                textField = textField * 3 + 1;
            }
            return textField;
        }, 0);

    return (
        <div>
            <form onSubmit>
            <h1>{textField}</h1>
            <input type="text"
                    value={text}
                    onChange={handleChange}/>
                   <button className="button"
                           onClick={onSubmit}
                   >
                       Collatz it!
                   </button>
            </form>
        </div>
    )
}

Answer 1

Before returning textField value from useReducer you can update the value of text using setText . Like this. Working Demo

import React, { useReducer, useState } from "react";

export default function App() {
  const [text, setText] = useState(0);

  console.log(text);
  function handleChange(e) {
    e.preventDefault();
    setText(e.target.value);
  }

  function onSubmit(e) {
    e.preventDefault();
    setTextField();
  }

  const [textField, setTextField] = useReducer((textField) => {
    textField = text;
    if (textField === 1) {
      textField = 1;
    } else if (textField % 2 === 0) {
      textField = textField / 2;
    } else if (textField % 2 !== 0) {
      textField = textField * 3 + 1;
    }
    setText(textField);
    return textField;
  }, 0);

  return (
    <div>
      <form onSubmit>
        <h1>{textField}</h1>
        <input type="text" value={text} onChange={handleChange} />
        <button className="button" onClick={onSubmit}>
          Collatz it!
        </button>
      </form>
    </div>
  );
}

Answer 2

I think giving up the reducer to make it more simple, and adding another local state for the "textField" number should solve it, like:

import React, { useState } from "react";

export default function App() {
  const [text, setText] = useState(0);
  const [textField, setTextField] = useState(0);

  console.log(text);
  function handleChange(e) {
    e.preventDefault();
    setText(e.target.value);
  }

  function onSubmit(e) {
    e.preventDefault();
    setTextField(getTextField(textField));
  }

  function getTextField(textField) {
    let result = 0;
    if (textField === 1) {
      result = 1;
    } else if (textField % 2 === 0) {
      result = textField / 2;
    } else if (textField % 2 !== 0) {
      result = textField * 3 + 1;
    }
    return result;
  };

  return (
    <div>
      <form onSubmit>
        <h1>{textField}</h1>
        <input type="text" value={text} onChange={handleChange} />
        <button className="button" onClick={onSubmit}>
          Collatz it!
        </button>
      </form>
    </div>
  );
}

Answer 3

From what I understand, you just need to set your textField value in your text value right after the setTextField

The onSubmit function should look like this:

function onSubmit(e) {
  e.preventDefault();
  setTextField();
  setText(textField);
}