We Keep Coding

React not triggering re-rendering of form inputs after state is updated via onChange

I am trying to build out a verification code page.
If I create an individual state for each input box, and then use the code below, it works appropriately.
<input type="number" value={inputOne} className={styles.codeInput} onChange={e => setInputOne(e.target.value}/>
However, I was trying to consolidate the state for all four of the input boxes, into one state object.
Now, when I type in a number, it moves on to the next input, but it never renders the value. In dev tools, I see the value flash like it updates, but it still stays as "value" and not "value="1"" for example.
However, if I do anything else to my code, like for example, change a p tag's text, then suddenly it updates and the inputs show the correct value.
I'm just trying to figure out what I'm doing wrong here.
Here's my current code.
import { useState } from 'react'
import styles from '../../styles/SASS/login.module.scss'
export default function Verify(params) {
const [verifCode, setVerifCode] = useState(['','','','']);
const inputHandler = (e, index) => {
// get event target value
let value = e.target.value;
// update state
let newState = verifCode;
newState[index] = value;
setVerifCode(newState);
// move focus to next input
if (e.target.nextSibling) {
e.target.nextSibling.focus()
} else {
// if at the last input, remove focus
e.target.blur();
}
}
return (
<div className={styles.verify}>
<p className={styles.title}>Verification</p>
<p className={styles.message}>Please enter the verification code we sent to your email / mobile phone.</p>
<div className={styles.form}>
<input type="number" value={verifCode[0]} className={styles.codeInput} onChange={e => inputHandler(e, 0)}/>
<input type="number" value={verifCode[1]} className={styles.codeInput} onChange={e => inputHandler(e, 1)}/>
<input type="number" value={verifCode[2]} className={styles.codeInput} onChange={e => inputHandler(e, 2)}/>
<input type="number" value={verifCode[3]} className={styles.codeInput} onChange={e => inputHandler(e, 3)}/>
</div>
<div className={styles.footer}>
<button>Verify Code</button>
</div>
</div>
)
};

I believe the problem lies in the following code
// update state
let newState = verifCode;
newState[index] = value;
setVerifCode(newState);
First line of the code just adds a pointer to the value verifCode.
You modify an element in that array, but newState is still the same variable verifCode. Even though the array elements have changed essentially it is still same variable (same reference).
Try something like:
// update state
const newState = [...verifCode]; // create a copy of the old verifCode, creating new array
newState[index] = value; // modify element
setVerifCode(newState); // set the new array to the state

Vue data() object Input v-model doesn't work unless I refresh the page

So this is incredibly hard to explain, instead I made a video to showcase what's going on:
https://www.youtube.com/watch?v=md0FWeRhVkE
To explain in steps:
A user can create a new account.
This user will be automatically logged in (no e-mail verification step yet).
Then without refreshing the page, I'm trying to add a category.
There's a custom component that is v-modeled to a data() value (as you can see in the video this is category_name.
Whenever I fill something in in the input field, this should display above the input field (as I'm dumping the value there). You see that this doesn't happen before the page refresh.
However when I refresh the page, the v-model suddenly works.
Does anybody know what's going on and why it doesn't work when I register the user initially? It seems that the data() value category_name doesn't get created or something unless you refresh the page?
Thanks!

Your custom input (Input.vue) is not declaring and using the value prop that v-model is binding to - see the docs how v-model on custom component works
Wouldn't that only be necessary for two-way binding? As I see it, binding the value prop just allows the input value to be changed from the parent
Well, not exactly. value binding ("value from parent") is essential any time component is created and reused.
Reusing existing component instances is very common (and useful) optimization strategy Vue uses. You can play with the example below to see what is an effect of missing value biding on custom input.
And components are created more often then you can think. Switching to "Fixed" component and back demonstrates how broken the v-model without binding value is in case components are created dynamically (for example when used in Router views or some sort of custom "Tab" component)
I know this is "long shot" - I'm not sure this fixes the issue (sharing git repo doesn't fit to my definition of Minimal, Reproducible Example) BUT it is definitely a bug and I do not see anything else particularly wrong with the rest of the code...
Given how broken custom input without value is, it is reasonable to think that Vue devs never expected usage like this and that it can lead to all sorts of "strange" and unexpected behaviors ...
Vue.component('my-input-broken', {
props: ['name', 'type', 'label'],
methods: {
inputHandler(e) {
this.$emit('input', e.target.value);
},
},
template: `
<div v-if="name && type" :id="name">
<input v-if="type !== 'textarea'" #input="inputHandler" :name="name" :type="type" />
<textarea v-else-if="type === 'textarea'" #input="inputHandler" #blur="blurHandler($event)" :name="name" type="textarea" />
<label v-if="label" :for="name">{{label}}</label>
</div>
`
})
Vue.component('my-input-fixed', {
props: ['name', 'type', 'label', 'value'],
methods: {
inputHandler(e) {
this.$emit('input', e.target.value);
},
},
template: `
<div v-if="name && type" :id="name">
<input v-if="type !== 'textarea'" #input="inputHandler" :name="name" :type="type" :value='value' />
<textarea v-else-if="type === 'textarea'" #input="inputHandler" #blur="blurHandler($event)" :name="name" :value='value' type="textarea" />
<label v-if="label" :for="name">{{label}}</label>
</div>
`
})
const vm = new Vue({
el: '#app',
data: function() {
return {
values: [""],
componentToUse: 'a'
}
},
methods: {
addInput() {
this.values.unshift("")
}
},
computed: {
comp() {
return this.componentToUse === 'a' ? "my-input-broken" : "my-input-fixed"
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<div id="app">
<label for="componentToUse">Component to use:</label>
<input type="radio" name="componentToUse" v-model="componentToUse" value="a"> Broken
<input type="radio" name="componentToUse" v-model="componentToUse" value="b"> Fixed
<hr>
<button #click="addInput">Add at beginning...</button>
<component :is="comp" v-for="(value, index) in values" :key="index" v-model="values[index]" :name="`value_${index}`" type="text" :label="`value_${index} ('${values[index]}')`"></component>
</div>

I think I understood the main problem of v-model now.
<input v-model="myObject[attribute]" />
is equivalent to
<input
v-bind:value="myObject[attribute]"
v-on:input="myObject[attribute] = $event"
/>
In my case the problem was that the GUI wasn't refreshing after myObject[attribute] was reassigned.
My workaround to this problem was to call $forceUpdate() after reassigning the variable which would look like following:
<input
v-bind:value="myObject[attribute]"
v-on:input="myObject[attribute] = $event; $forceUpdate()"
/>
Not sure if this solves your issue but I hope it helps somebody out there who is facing the same problem.

ReactJs: useState making string empty

// App.js
const [currentContent, setCurrentContent] = useState('')
const openNote = (id) => {
notes.forEach(note => note.id == id && setCurrentContent(note.content))
}
Part of return:
<TextRegion className="center" content={currentContent}/>
I am passing content as a prop via a state seen in the code block above. This seems to work fine.
// TextRegion.js
import React, {useState} from 'react'
const TextRegion = ({ content }) => {
const [areaText, setAreaText] = useState(content)
console.log(areaText)
return (
<div className="form-div">
<form className="form">
<textarea className="content form-control" type="text" value={content}/>
<button style={{'float': 'right'}} className="btn btn-primary mt-2 mr-2" type='submit'>Save</button>
</form>
</div>
)
}
export default TextRegion;
The issue arises when I attempt to set the content prop to the default state of areaText. Content is of type string, and prints to console just fine. Although, when trying to print areaText, an empty string is returned. This is baffling to me, any explanations? Thanks.

The initial value for useState is used once when the component is mounted. In your TextRegion component, areaText is set to the value of the content prop when TextRegion is mounted. Since currentContent is initialised as an empty string, so is areaText.
If you change the value of content prop while the TextRegion is mounted, the useState hook controlling areaText will just ignore the new value, because it has already initialised the value for areaText.

One issue I found is in your textRegion.js you are using form and the button is type of submit so that will reload your page. always use e.preventDefault on submit method in react applications.
You can pass both currentContent and setCurrentContent via pros and use that state directly rather than creating a new state.
Use two way binding in react.
Example
<textarea
className="content form-control" type="text"
value={areaText}
onChage={(e)=> setAreaText(e.target.value)}
/>

Can value of input box be set to to empty string on clicking submit button when the input is in a stateless functional component?

How to clear the value inside the input in function Admin after I click the "Add" button? Should i use another class based component instead of a functional component?
I have set the value of one of the input box as : value={props.item} and in the this.setState I update the value of item as item:"".
AddInfo(info){
let s = this.state.products;
let obj ={name:""};
obj.name=info.productName;
s.push(obj);
this.setState({
products:s,
item:"" //Here i set the value of item equal to an empty string.
})
console.log(this.state.products);
}
function Admin(props){
let productName="";
return (
<div>
<input type="text" required placeholder="Product Name" onChange={(e)=>{productName=e.target.value}} value={props.item}></input><br/>
<button type="Submit" onClick{(e)=>props.AddInfo({productName})}>Add</button>
</div>
)
}

You have to save your input within a local state of the input function:
AddInfo(info){
let s = this.state.products;
let obj ={name:""};
obj.name=info.productName;
s.push(obj);
this.setState({
products:s,
})
console.log(this.state.products);
}
function Admin(props){
const [productName, setProductName] = useState('');
return (
<div>
<input type="text" required placeholder="Product Name" onChange={(e)=> setProductName(e.target.value) value={productName}></input><br/>
<button type="Submit" onClick{(e)=> {props.AddInfo({productName}); setProductName('')}}>Add</button>
</div>
)
}
This will work for you, since you are not mutating the productName variable anymore but now you are saving it in a local state of that input function.
Hope this helps!

Admin is like a form, and the main decision you have to make is rather you want it to be controlled (info is stored in stated, and state is reflected in the ui), or uncontrolled (info is taken from the dom once 'Add' is clicked.
Since you want to empty the input once 'Add' is clicked it makes sense to make this component controlled.
The next decision is rather you want it to be a functional component, or a class component. In nowadays it doesn't really matter (functional components can now use state with the state hook).
To store state in you functional component use React's useState hook.
function Admin({addInfo}){
const [productName, setProductName] = useState(")
return (
<div>
<input
type="text"
placeholder="Product Name"
onChange={(e)=>{
setProductName(e.target.value)
}
value={prodcutName}>
</input>
<button
onClick{(e)=>{
props.addInfo({productName})
setProductName("") // Will set the input to an empty string
}
>
Add
</button>
</div>
)
}

How to get Material-UI's <TextField/> to return correctly with ref='' like <input/> in ReactJS?

With the following method:
handleClick(event) {
const inputText = this.refs.inputText
console.log(inputText.value.trim())
}
I am trying to get Material-UI's <TextField/> to return the input text correctly with ref like the <input/> can with <button/> triggering it:
<input
className='form-control'
placeholder='Input Text'
ref='inputText'
type='text'
/>
<button
onClick={(event) => this.handleClick(event)}
>
And I attempted the following with <TextField/>, but it returns as undefined. How can I get it to return inputted text correctly like the <input/> above?
<TextField
hint='Enter text'
className='form-control'
ref='inputText'
type='text'
/>

I would suggest this approach:
Set up your textfield with a value and onChange function that are hooked into redux itself, where the onChange function just updates the value.
So you'd have something like this :
<TextField
value={this.props.textFieldValue}
onChange={this.props.textFieldChange}
Where the textFieldChange is an action that simply updates the textFieldValue. Most forms in redux will work something like this. Keep in mind the names i made up for those props and action are just for example. If you have a big form you might want to consider have part of the state tree dedicated to the form itself where you have :
state: {
form: {
textField: ...your textfield value here,
name: ...,
whateverElse: ...
}
};
I like doing this with redux because I can make that architect form part of the state to look like the json payload of wherever I'm sending it to, so there I can just send the form went I want to send it.
Anyways, back to this example. When you click your handleClick now. All you need to do is this to get the value:
handleClick(event) {
console.log(this.props.textFieldValue.trim());
}
Because the textfield is updated with every change, you always have access to it in your state. This also gives you flexibility over the refs approach, because if you use refs you will have a lot harder of a time getting access to that form in other components. With this approach, all the information is on your state so you can access it anytime, as long as you manage your props.

You should use the onChange={} to get the value:
_onChange = (e) => {
console.log(e.target.value);
}
<TextField
onChange={this._onChange}
/>

Here's a better solution than using onchange event, we get directly the value of the input created by material-ui textField :
create(e) {
e.preventDefault();
let name = this.refs.inputText.input.value;
alert(name);
}
constructor(){
super();
this.create = this.create.bind(this);
}
render() {
return (
<form>
<TextField ref="inputText" hintText="" floatingLabelText="Your name" /><br/>
<RaisedButton label="Create" onClick={this.create} primary={true} />
</form>
)}
hope this helps.