I have a form made with React Bootstrap to semply submit a string that will be saved on a DB. It works and the submitted message is saved, but I don't know how to clear the textarea when the message is submitted.
As you can see, what I tried to do is to use the useState hook to set an empty value but after the form is submitted the string is still visible in the textarea. Is there any way to do this?
const Form = (props) => {
const [isLoading, setLoading] = useState(false);
const [value, setValue] = useState(props.value);
const handleSubmit = async event => {
setLoading(true);
event.preventDefault();
const res = await fetch(
// here I call the api
)
result = await res.json();
setValue(null);
setLoading(false);
};
return (
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="text">
<Form.Control as="textarea"
required
type="text"
placeholder=""
defaultValue={value}
/>
</Form.Group>
<Button
variant="primary"
type="submit"
disabled={isLoading}
>
{isLoading ? 'Saving...' : 'Save'}
</Button>
</Form>
)
}
export default Form;
Remove value from props - Form component should hold this state. Then, for controlled input you need to change "defaultValue" to "value" on Form.Control. Also add onChange and set the value. On form submit you can set your value state to empty string, not null:
https://codesandbox.io/s/competent-carson-wupp3i
To my eye, your textarea is currently uncontrolled, and so any changes made to value won't be updated in the Form.Control component.
<Form.Control
as="textarea"
rows={3}
value={value}
onChange={e => {
setValue(e.target.value);
}
/>
Rather than using the defaultValue prop, I would probably use setValue(props.value) to reset value in your handler function.
I am a newbie to react and I was not able to figure how to reset the checkbox to uncheck stat on resetting. I have used the react-bootstrap form and need to reset the checkboxes to default state on a button click.
export const pitch: FC<pitchProps> = ({ pitchData, totalNoOfData }) => {
const [loading, setLoading] = useState(false);
const [totalRows, setTotalRows] = useState(totalNoOfData);
const formData = {
searchData: pitchParam.searchString,
searchCriteria: pitchParam.searchStatus,
};
const handleFormData = (e: any) => {
if (e.target.type === "checkbox") {
e.target.checked
? formData.searchCriteria.push(e.target.id)
: (formData.searchCriteria = formData.searchCriteria.filter(
(item: any) => item !== e.target.id
));
} else {
formData.searchData = e.target.value;
}
};
return (
<div className={styles.mainTableContainer}>
<div className="d-flex ml-2">
<Form className="w-100">
<Form.Row>
<Form.Label className={styles.label}>NEW </Form.Label>
<Form.Check
className={styles.checkbox}
type="checkbox"
id="OLD"
onChange={(e: any) => handleFormData(e)}
/>
<Form.Label className={styles.label}> OLD </Form.Label>
<Form.Check
className={styles.checkbox}
type="checkbox"
id="OUTDATED"
onChange={(e: any) => handleFormData(e)}
/>
<Form.Label className={styles.label}>OUTDATED </Form.Label>
<Form.Check
className={styles.checkbox}
type="checkbox"
id="SUCCESS"
onChange={(e: any) => handleFormData(e)}
/>
</Form.Row>
</Form>
</div>
</div>
);
};
Your checkbox component is not fully controlled by you, so it is an uncontrolled component.
Solution 1 : using reference
As your checkbox is controlled by the bootstrap-form you need to create a reference and pass it to the checkbox to manipulate the checked value:
import React, {useRef} from 'react';
// reset of the codes
// in the pitch component
const checkboxRef = useRef(null);
Now, pass the checkboxRef into the checkbox component within ref property:
<Form.Check
type={type}
id={`default-${type}`}
label={`default ${type}`}
ref={checkboxRef} // <--------- here
/>
Now, try to add another button with a reset handler:
const handleResetCheckbox = () => {
checkboxRef.current.checked = false
}
Solultion 2 : using react key
You can also do the same with a different approach by using the React component's key.
If the key gets changes, react will remove the component and create a new one. so you can use this key property to uncheck (reset) the checkboxes:
define a key with useState and pass it to the checkbox component:
const [key, setKey] = useState(false)
<Form.Check
key={key} // <--------- added here
type={type}
id={`default-${type}`}
label={`default ${type}`}
/>
Now, in the handleResetCheckbox, change the key:
const handleResetCheckbox = () => {
setKey(prevState => !prevState)
}
So, when you reset the checkbox, the key will change then React will remove the old checkbox and render a new one. more information in React documentation.
Suppose I have a component like this -
const MyForm = ({ formId }) => (
<div>
<input type="text" placeholder="Full name"></input>
<input type="text" placeholder="Email"></input>
</div>
)
export default MyForm;
And then I have my App.js like so -
import React from "react";
import MyForm from "./MyForm";
const App = () => (
<div id="app">
<MyForm formId="formOne"></MyForm>
<MyForm formId="formTwo"></MyForm>
<button onClick={
() => {
// Here, when the user clicks the button,
// I want to get values of both the textboxes,
// from both the component instances
}
}>Submit</button>
</div>
)
export default App;
So basically, what I want is - when the button is clicked, I want to be able to retrieve the values of the textboxes. One way to do this is to raise an event from inside MyForm.js so that every text change is bubbled up to the parent via a callback function prop, but that feels too cumbersome, especially if the form has a lot of fields. Is there any simple or direct way to do this? Do I need to involve global state management tools like Redux?
State inside a component is specific only to that component, the parent , children or sibling of a component have no idea of the state. The only way to communicate the value from one component to another component is via props . In your case, what we need is a state to reside at the App which can then be passed as a prop to both the MyForm Components.
App.js
const [ formState, setFormState ] = useState({ formOne: {fullName: '', Email: ''}, formTwo: '' })
const updateFormValues = (formId, key, value) => {
const stateCopy = JSON.parse(JSON.stringify(formState));
const formToUpdate = stateCopy[formId];
formToUpdate[key] = value;
setFormState(stateCopy)
}
<MyForm formId="formOne" values={formState.formOne} updateFormValues={updateFormValues}></MyForm>
<MyForm formId="formTwo" values={formState.formTwo} updateFormValues={updateFormValues}></MyForm>
MyForm.js
const MyForm = ({ formId, values, updateFormValues }) => {
const onInputChange = (e, key) => {
updateFormValues(formId, key, e.target.value)
}
return(
<div>
<input type="text" onChange={(e) => onInputChange(e, 'fullName'} value={values.fullName} placeholder="Full name"></input>
<input type="text" onChange={(e) => onInputChange(e, 'email'} value={values.email} placeholder="Email"></input>
</div>
)}
export default MyForm;
To have access to data inside children components you need to lift the state to the parent component.
One-way data flow
Identify every component that renders something based on that state.
Find a common owner component (a single component above all the components that need the state in the hierarchy).
Either the common owner or another component higher up in the hierarchy should own the state.
If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common owner component.
One way to do this:
import React, { useState } from "react";
function MyForm(props) {
const { handleChange, values } = props;
return (
<div>
<label htmlFor="name">Your name</label>
<input
type="text"
placeholder="Full name"
onChange={handleChange}
value={values.name}
id="name"
name="name"
/>
<label htmlFor="email">Your email</label>
<input
type="email"
placeholder="Email"
onChange={handleChange}
value={values.email}
id="email"
name="email"
/>
</div>
);
}
function App() {
const [values, setValues] = useState({ name: "", email: "" });
const handleChange = (event) => {
const updatedForm = { ...values, [event.target.name]: event.target.value };
setValues(updatedForm);
};
return (
<div id="app">
<MyForm
formId="formOne"
values={values}
handleChange={handleChange}
></MyForm>
<button
onClick={() => {
console.log(values);
}}
>
Submit
</button>
</div>
);
}
export default App;
I am quite new to Redux-form and I am trying to access the form values inside the function of onChange handler on a checkbox.
I can alert the values/ console log the values. However, I want to access the values when I check the checkbox.
Also this checkbox is checked by default. Please advise/help. thanks in advance.
onClickOnLoanInsurence = (CheckBox1) =>{
//here i can access the value of checkbox, however, the value is inverted, what it means is, it shows false when true and true when false
}
<Field
name="CheckBox1"
component="input"
type="checkbox"
defaultChecked={true}
component={renderCheckBoxField}
onChange ={this.onClickOnLoanInsurence.bind(this,CheckBox1)}
label="Some Label"
/>
const selector = formValueSelector("myForm");
MyForm= connect(state => {
const values = selector(
state,
"FormField1",
"FormField2",
"FormField3",
"FormField4",
"CheckBox1",
"FormField5",
"FormField6",
"FormField7",
);
console.log("values of the form");
console.log(values);
//window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
return {
values
};
})(MyForm)
const mapStateToProps = (state,props) => {
const checkBox1= selector(state, "CheckBox1")
return {
checkBox1: !state.CheckBox1,
}
}
//CheckBox component
import React from 'react';
export const renderCheckBoxField = props => {
const { input: { onBlur,onFocus, ...rest } } = props;
return(
<div className="form-group">
<div className="checkbox">
<label className="container-checkbox">{props.label}
<input {...rest} type="checkbox" />
<span className="checkmark"></span>
</label>
</div>
</div>
)
}
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.*
Following is my code:
constructor(props) {
super(props);
this.state = {
fields: {},
errors: {}
}
this.onSubmit = this.onSubmit.bind(this);
}
....
onChange(field, e){
let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({fields});
}
....
render() {
return(
<div className="form-group">
<input
value={this.state.fields["name"]}
onChange={this.onChange.bind(this, "name")}
className="form-control"
type="text"
refs="name"
placeholder="Name *"
/>
<span style={{color: "red"}}>{this.state.errors["name"]}</span>
</div>
)
}
The reason is, in state you defined:
this.state = { fields: {} }
fields as a blank object, so during the first rendering this.state.fields.name will be undefined, and the input field will get its value as:
value={undefined}
Because of that, the input field will become uncontrolled.
Once you enter any value in input, fields in state gets changed to:
this.state = { fields: {name: 'xyz'} }
And at that time the input field gets converted into a controlled component; that's why you are getting the error:
A component is changing an uncontrolled input of type text to be
controlled.
Possible Solutions:
1- Define the fields in state as:
this.state = { fields: {name: ''} }
2- Or define the value property by using Short-circuit evaluation like this:
value={this.state.fields.name || ''} // (undefined || '') = ''
Changing value to defaultValue will resolve it.
Note:
defaultValue is only for the initial load.
If you want to initialize the input then you should use defaultValue, but if you want to use state to change the value then you need to use value. Read this for more.
I used value={this.state.input ||""} in input to get rid of that warning.
Inside the component put the input box in the following way.
<input className="class-name"
type= "text"
id="id-123"
value={ this.state.value || "" }
name="field-name"
placeholder="Enter Name"
/>
In addition to the accepted answer, if you're using an input of type checkbox or radio, I've found I need to null/undefined check the checked attribute as well.
<input
id={myId}
name={myName}
type="checkbox" // or "radio"
value={myStateValue || ''}
checked={someBoolean ? someBoolean : false}
/>
And if you're using TS (or Babel), you could use nullish coalescing instead of the logical OR operator:
value={myStateValue ?? ''}
checked={someBoolean ?? false}
SIMPLY, You must set initial state first
If you don't set initial state react will treat that as an uncontrolled component
that's happen because the value can not be undefined or null to resolve you can do it like this
value={ this.state.value ?? "" }
const [name, setName] = useState()
generates error as soon as you type in the text field
const [name, setName] = useState('') // <-- by putting in quotes
will fix the issue on this string example.
As mentioned above you need to set the initial state, in my case I forgot to add ' ' quotes inside setSate();
const AddUser = (props) => {
const [enteredUsername, setEnteredUsername] = useState()
const [enteredAge, setEnteredAge] = useState()
Gives the following error
Correct code is to simply set the initial state to an empty string ' '
const AddUser = (props) => {
const [enteredUsername, setEnteredUsername] = useState('')
const [enteredAge, setEnteredAge] = useState('')
Set Current State first ...this.state
Its because when you are going to assign a new state it may be undefined. so it will be fixed by setting state extracting current state also
this.setState({...this.state, field})
If there is an object in your state, you should set state as follows,
suppose you have to set username inside the user object.
this.setState({user:{...this.state.user, ['username']: username}})
Best way to fix this is to set the initial state to ''.
constructor(props) {
super(props)
this.state = {
fields: {
first_name: ''
}
}
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({
fields:{
...this.state.fields,
[e.target.name]: e.target.value
}
})
}
render() {
return(
<div className="form-group">
<input
value={this.state.fields.first_name}
onChange={this.onChange}
className="form-control"
name="first_name" // Same as state key
type="text"
refs="name"
placeholder="Name *"
/>
<span style={{color: "red"}}>{this.state.errors.first_name}</span>
</div>
)
}
Then you can still run your checks like if (field) and still achieve the same result if you have the value as ''.
Now since your value is now classified as type string instead of undefined after evaluation. Thus, clearing the error from the console of a big red block 😁😎.
I am new to reactjs and I am using version 17 of reactjs
I was getting this problem
I solved:
Instead of this
const [email, setEmail] = useState();
I added this
const [email, setEmail] = useState("");
In useState function I added quotes to initialize the data and the error was gone.
Put empty value if the value does not exist or null.
value={ this.state.value || "" }
If you're setting the value attribute to an object's property and want to be sure the property is not undefined, then you can combine the nullish coalescing operator ?? with an optional chaining operator ?. as follows:
<input
value={myObject?.property ?? ''}
/>
In my case it was pretty much what Mayank Shukla's top answer says. The only detail was that my state was lacking completely the property I was defining.
For example, if you have this state:
state = {
"a" : "A",
"b" : "B",
}
If you're expanding your code, you might want to add a new prop so, someplace else in your code you might create a new property c whose value is not only undefined on the component's state but the property itself is undefined.
To solve this just make sure to add c into your state and give it a proper initial value.
e.g.,
state = {
"a" : "A",
"b" : "B",
"c" : "C", // added and initialized property!
}
Hope I was able to explain my edge case.
If you use multiple input in on field, follow:
For example:
class AddUser extends React.Component {
constructor(props){
super(props);
this.state = {
fields: { UserName: '', Password: '' }
};
}
onChangeField = event => {
let name = event.target.name;
let value = event.target.value;
this.setState(prevState => {
prevState.fields[name] = value;
return {
fields: prevState.fields
};
});
};
render() {
const { UserName, Password } = this.state.fields;
return (
<form>
<div>
<label htmlFor="UserName">UserName</label>
<input type="text"
id='UserName'
name='UserName'
value={UserName}
onChange={this.onChangeField}/>
</div>
<div>
<label htmlFor="Password">Password</label>
<input type="password"
id='Password'
name='Password'
value={Password}
onChange={this.onChangeField}/>
</div>
</form>
);
}
}
Search your problem at:
onChangeField = event => {
let name = event.target.name;
let value = event.target.value;
this.setState(prevState => {
prevState.fields[name] = value;
return {
fields: prevState.fields
};
});
};
Using React Hooks also don't forget to set the initial value.
I was using <input type='datetime-local' value={eventStart} /> and initial eventStart was like
const [eventStart, setEventStart] = useState();
instead
const [eventStart, setEventStart] = useState('');.
The empty string in parentheses is difference.
Also, if you reset form after submit like i do, again you need to set it to empty string, not just to empty parentheses.
This is just my small contribution to this topic, maybe it will help someone.
like this
value={this.state.fields && this.state.fields["name"] || ''}
work for me.
But I set initial state like this:
this.state = {
fields: [],
}
I came across the same warning using react hooks,
Although I had already initialized the initial state before as:-
const [post,setPost] = useState({title:"",body:""})
But later I was overriding a part of the predefined state object on the onChange event handler,
const onChange=(e)=>{
setPost({[e.target.name]:e.target.value})
}
Solution
I solved this by coping first the whole object of the previous state(by using spread operators) then editing on top of it,
const onChange=(e)=>{
setPost({...post,[e.target.name]:e.target.value})
}
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Solution : Check if value is not undefined
React / Formik / Bootstrap / TypeScript
example :
{ values?.purchaseObligation.remainingYear ?
<Input
tag={Field}
name="purchaseObligation.remainingYear"
type="text"
component="input"
/> : null
}
The reason of this problem when input field value is undefined then throw the warning from react. If you create one changeHandler for multiple input field and you want to change state with changeHandler then you need to assign previous value using by spread operator. As like my code here.
constructor(props){
super(props)
this.state = {
user:{
email:'',
password:''
}
}
}
// This handler work for every input field
changeHandler = event=>{
// Dynamically Update State when change input value
this.setState({
user:{
...this.state.user,
[event.target.name]:event.target.value
}
})
}
submitHandler = event=>{
event.preventDefault()
// Your Code Here...
}
render(){
return (
<div className="mt-5">
<form onSubmit={this.submitHandler}>
<input type="text" value={this.state.user.email} name="email" onChage={this.changeHandler} />
<input type="password" value={this.state.user.password} name="password" onChage={this.changeHandler} />
<button type="submit">Login</button>
</form>
</div>
)
}
Multiple Approch can be applied:
Class Based Approch: use local state and define existing field with default value:
constructor(props) {
super(props);
this.state = {
value:''
}
}
<input type='text'
name='firstName'
value={this.state.value}
className="col-12"
onChange={this.onChange}
placeholder='Enter First name' />
Using Hooks React > 16.8 in functional style components:
[value, setValue] = useState('');
<input type='text'
name='firstName'
value={value}
className="col-12"
onChange={this.onChange}
placeholder='Enter First name' />
If Using propTypes and providing Default Value for propTypes in case of HOC component in functional style.
HOC.propTypes = {
value : PropTypes.string
}
HOC.efaultProps = {
value: ''
}
function HOC (){
return (<input type='text'
name='firstName'
value={this.props.value}
className="col-12"
onChange={this.onChange}
placeholder='Enter First name' />)
}
Change this
const [values, setValues] = useState({intialStateValues});
for this
const [values, setValues] = useState(intialStateValues);
I also faced the same issue. The solution in my case was I missed adding 'name' attribute to the element.
<div className="col-12">
<label htmlFor="username" className="form-label">Username</label>
<div className="input-group has-validation">
<span className="input-group-text">#</span>
<input
type="text"
className="form-control"
id="username"
placeholder="Username"
required=""
value={values.username}
onChange={handleChange}
/>
<div className="invalid-feedback">
Your username is required.
</div>
</div>
</div>
After I introduced name = username in the input list of attributes it worked fine.
For functional component:
const SignIn = () => {
const [formData, setFormData] = useState({
email: "",
password: ""
});
const handleChange = (event) => {
const { value, name } = event.target;
setFormData({...formData, [name]: value });
};
const handleSubmit = (e) => {
e.preventDefault();
console.log("Signed in");
setFormData({
email: "",
password: ""
});
};
return (
<div className="sign-in-container">
<form onSubmit={handleSubmit}>
<FormInput
name="email"
type="email"
value={formData.email}
handleChange={handleChange}
label="email"
required
/>
<FormInput
name="password"
type="password"
value={formData.password}
handleChange={handleChange}
label="password"
required
/>
<CustomButton type="submit">Sign in</CustomButton>
</form>
</div>
);
};
export default SignIn;
While this might sound crazy, the thing that fixed this issue for me was to add an extra div. A portion of the code as an example:
... [Other code] ...
const [brokerLink, setBrokerLink] = useState('');
... [Other code] ...
return (
... [Other code] ...
<div styleName="advanced-form" style={{ margin: '0 auto', }}>
{/* NOTE: This div */}
<div>
<div styleName="form-field">
<div>Broker Link</div>
<input
type="text"
name="brokerLink"
value={brokerLink}
placeholder=""
onChange={e => setBrokerLink(e.target.value)}
/>
</div>
</div>
</div>
... [Other code] ...
);
... [Other code] ...
Was very strange. Without this extra div, it seems react initially rendered the input element with no value attribute but with an empty style attribute for some reason. You could see that by looking at the html. And this led to the console warning..
What was even weirder was that adding a default value that is not an empty string or doing something like value={brokerLink || ''} would result in the exact same problem..
Another weird thing was I had 30 other elements that were almost exactly the same but did not cause this problem. Only difference was this brokerLink one did not have that outer div..
And moving it to other parts of the code without changing anything removed the warning for some reason..
Probably close to impossible to replicate without my exact code. If this is not a bug in react or something, I don't know what is.
The problem occurs even if you set undefined to the value at a previous rendering that happened even before initializing things properly.
The issue went by replacing
value={value}
with
value={(value==undefined?null:value)}
For me, this was the mistake:
<input onChange={onClickUpdateAnswer} value={answer.text}>
{answer.text}
</input>
As you see, I have passes string into the body of the Input tag,
Fix:
<input onChange={onClickUpdateAnswer} value={answer.text}></input>