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>
)
}
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>
);
}
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>
);
}
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);
}