This component doesn't update even tho props change.
prop row is an object.
console.log("row", row") does work. and get correct data also console.log("Data", data)
import React, {useState, useEffect} from "react";
const Form = ({row}) => {
const [data, setData] = useState(row);
console.log("row", row); //consoleLog1
useEffect(() => {
setData(row);
}, [row]);
return (
<>
{Object.getOwnPropertyNames(data).map((head) => {
console.log("Data", data);//consoleLog2
return <input type="text" name={head} defaultValue={data[head] == null ? "" : data[head]} />;
})}
</>
);
};
export default Form;
Update
changing return to <input value={data["ID"}> . and it does update .
is there any way to create a form using looping object's properties?
The defaultValue prop is used for uncontrolled components. It sets the starting value, and then it's out of your hands. All changes will be handled internally by input. So when you rerender and pass in a new defaultValue, that value is ignored.
If you need to change the value externally, then you either need to unmount and remount the components, which can be done by giving them a key which changes:
<input key={data[head].someUniqueIdThatChanged}
Or you need to use the input in a controlled manner, which means using the value prop instead.
value={data[head] == null ? "" : data[head]}
For more information on controlled vs uncontrolled components in react, see these pages:
https://reactjs.org/docs/forms.html#controlled-components
https://reactjs.org/docs/uncontrolled-components.html
P.S, copying props into state is almost always a bad idea. Just use the prop directly:
const Form = ({row}) => {
return (
<>
{Object.getOwnPropertyNames(row).map((head) => {
return <input type="text" name={head} defaultValue={row[head] == null ? "" : row[head]} />;
})}
</>
);
}
Related
I am new to react and material UI and struggling to load Autocomplete component options dynamically.
Initially, I am setting empty array as initial option until data is fetched from the database. Once I get my data I update the Autocomplete options with my data and it's working but at the same time I am getting the following warning
Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.
My code
const [listItems, setListItems] = useState([]);
const {formik, items} = props;
const handleGetOptionSelected = (option, value) => {
if (!items) {
return {};
}
return option.id === value.id;
};
const handleGetOptionLabel = (option) => {
if (!items) {
return 'No Options';
}
return option.name;
};
useEffect(() => {
if (items) {
setListItems(items);
}
}, [items]);
return (
<Autocomplete
className={classes.autoComplete}
multiple
id="tags-standard"
options={listItems}
getOptionLabel={(option) => handleGetOptionLabel(option)}
getOptionSelected={(option, value) => handleGetOptionSelected(option, value)}
onChange={(event, selectedValues) => {
formik.setFieldValue(
"tag_ids",
getCollectionColumn(selectedValues, 'id'),
false
);
}}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
placeholder="select tags"
name="tag_ids"
error={formik.touched.tag_ids && Boolean(formik.errors.tag_ids)}
helperText={formik.touched.tag_ids && formik.errors.tag_ids}
/>
)}
/>
);
For an input to be controlled, its value must correspond to that of a state variable.
That condition is not initially met in your example because your state is not initially set before onChange. Therefore, the input is initially uncontrolled. Once the onChange handler is triggered for the first time, your formik data state gets set. At that point, the above condition is satisfied and the input is considered to be controlled. This transition from uncontrolled to controlled produces the error seen above.
By initializing formik data structure in the constructor to an empty string
the input will be controlled from the start, fixing the issue.
e.g If you want to set name inside formik then initialize it as empty string then change it
on onChange according to need. Like this:
constructor(props) {
super(props);
this.state = { name: '' }
}
I don't know your data structure so you can try this on your own by mimicking this.
See React Controlled Components for more examples. Also try this solution
I am implementing a form which is generated using a Json. The Json is retrieved from API and then looping over the items I render the input elements. Here is the sample Json :
{
name: {
elementType: 'input',
label: 'Name',
elementConfig: {
type: 'text',
placeholder: 'Enter name'
},
value: '',
validation: {
required: true
},
valid: false,
touched: false
}
}
Here is how I render the form :
render() {
const formElementsArray = [];
for (const key in this.props.deviceConfig.sensorForm) {
formElementsArray.push({
id: key,
config: this.props.deviceConfig.sensorForm[key]
});
const itemPerRow = 4;
const rows = [
...Array(Math.ceil(props.formElementsArray.length / itemPerRow))
];
const formElementRows = rows.map((row, idx) =>
props.formElementsArray.slice(
idx * itemPerRow,
idx * itemPerRow + itemPerRow
)
);
const content = formElementRows.map((row, idx) => (
<div className='row' key={idx}>
{row.map((formElement) => (
<div className='col-md-3' key={formElement.id}>
<Input
key={formElement.id}
elementType={formElement.config.elementType}
elementConfig={formElement.config.elementConfig}
value={formElement.config.value}
invalid={!formElement.config.valid}
shouldValidate={formElement.config.validation}
touched={formElement.config.touched}
label={formElement.config.label}
handleChange={(event) => props.changed(event, formElement.id)}
/>
</div>
))}
</div>
...
}
I am storing the form state in redux and on every input change , I update the state. Now the problem is everytime I update the state, the entire form is re-rendered again... Is there any way to optimise it in such a way that only the form element which got updated is re-rendered ?
Edit :
I have used React.memo in Input.js as :
export default React.memo(input);
My stateful Component is Pure component.
The Parent is class component.
Edit 2 :
Here is how I create formElementArray :
const formElementsArray = [];
for (const key in this.props.deviceConfig.sensorForm) {
formElementsArray.push({
id: key,
config: this.props.deviceConfig.sensorForm[key]
});
You can make content as a separate component like this.
And remove formElementsArray prop from parent component.
export default function Content() {
const formElementRows = useForElementRows();
formElementRows.map((row, idx) => (
<Input
formId={formElement.id}
handleChange={props.changed}
/>
)
}
Inside Input.js
const handleInputChange = useCallback((event) => {
handleChange(event, formId);
}, [formId, handleChange]);
<input handleChange={handleInputChange} />
export default React.memo(Input)
So you can memoize handleChange effectively. And it will allow us to prevent other <Input /> 's unnecessary renders.
By doing this forElementRows change will not cause any rerender for other components.
You could try a container, as TianYu stated; you are passing a new reference as change handler and that causes not only the component to re create jsx but also causes virtual DOM compare to fail and React will re render all inputs.
You can create a container for Input that is a pure component:
const InputContainer = React.memo(function InputContainer({
id,
elementType,
elementConfig,
value,
invalid,
shouldValidate,
touched,
label,
changed,
}) {
//create handler only on mount or when changed or id changes
const handleChange = React.useCallback(
(event) => changed(event, id),
[changed, id]
);
return (
<Input
elementType={elementType}
elementConfig={elementConfig}
value={value}
invalid={invalid}
shouldValidate={shouldValidate}
touched={touched}
label={label}
handleChange={handleChange}
/>
);
});
Render your InputContainer components:
{row.map((formElement) => (
<div className="col-md-3" key={formElement.id}>
<InputContainer
key={formElement.id}
elementType={formElement.config.elementType}
elementConfig={formElement.config.elementConfig}
value={formElement.config.value}
invalid={!formElement.config.valid}
shouldValidate={formElement.config.validation}
touched={formElement.config.touched}
label={formElement.config.label}
//re rendering depends on the parent if it re creates
// changed or not
changed={props.changed}
/>
</div>
))}
You have to follow some steps to stop re-rendering. To do that we have to use useMemo() hook.
First Inside Input.jsx memoize this component like the following.
export default React.memo(Input);
Then inside Content.jsx, memoize the value of elementConfig, shouldValidate, handleChange props. Because values of these props are object type (non-primitive/reference type). That's why every time you are passing these props, they are not equal to the value previously passed to that prop even their value is the same (memory location different).
const elementConfig = useMemo(() => formElement.config.elementConfig, [formElement]);
const shouldValidate = useMemo(() => formElement.config.validation, [formElement]);
const handleChange = useCallback((event) => props.changed(event, formElement.id), [formElement]);
return <..>
<Input
elementConfig={elementConfig }
shouldValidate={elementConfig}
handleChange={handleChange}
/>
<../>
As per my knowledge, this should work. Let me know whether it helps or not. Thanks, brother.
I have an app that updates state in a child component with the function setBrewLog that was set with useState
const [brewLog, setBrewLog] = useState([{ og: '' }]).
In the react-dev tools I can see that state is updated, and inside useEffect I can see that the component is rerendered, but the form field will not update. As well On a side note does Formik solve this issue?
I do get a error in the Chrome console.
A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Here is a simplified version of my code.
export const Brewlog = () => {
const [brewLog, setBrewLog] = useState({ og: '' })
const onBrewLogChanged = e => {
const tempBrewLog = [...brewLog]
tempBrewLog[e.target.id[e.target.id.length - 1]][e.target.name] = e.target.value
setBrewLog(tempBrewLog)
}
// useEffect is triggered when the Child component updates state.
useEffect(() => {
console.log(brewLog)
})
return(
<>
<h3>Brewlog</h3>
<Child setBrewLog={setBrewLog} />
<label htmlFor='og' >Original gravity</label>
//Does not update on state change
<p> is:{brewLog.og}</p>
<input
type="text"
name='og'
id='og0'
//does not update on state change
placeholder={brewLog.og}
value={brewLog.og}
onChange={onBrewLogChanged}
/>
<button type="button" onClick={''} >
Save Recipe
</button>
</>
)
}
const Child = ( props ) => {
const [message, setMessage] = useState('')
const ChangeState = () => {
props.setBrewLog([{ og: '1' }])
setMessage('OG is 1')
},
return (
<div>
<button type='button' onClick={ChangeState}>Start</button>
<p>{message}</p>
</div>
)
}
export default Child
Thanks you for your insights
As Emilie Bergeron pointed out I was using two different structures for my state. Changing them both to an object solved the problem.
I'm trying to connect material-ui ToggleButtonGroup with redux form and getting issues with this.
Here is my code:
<Field
name='operator'
component={FormToggleButtonGroup}
>
<ToggleButton value='equals'>Equal</ToggleButton>
<ToggleButton value='not_equals'>Not equal</ToggleButton>
</Field>
.. and my component, passed to Field:
const FormToggleButtonGroup = (props) => {
const {
input,
meta,
children
} = props;
return (
<ToggleButtonGroup
{...input}
touched={meta.touched.toString()}
>
{children}
</ToggleButtonGroup>
);
};
export default FormToggleButtonGroup;
the problem is, when I select value (toggle option), selected value is not passed to redux store, it passed only after loosing focus and then throws error 'newValue.splice is not a function'
Please help to deal with this issue
Sandbox with sample code
Playing with the component I finally found the solution.
I need manually assign new value got from ToggleButtonGroup component and put this value to redux store. Here is how working code looks:
const FormToggleButtonGroup = (props) => {
const {
input,
meta,
children,
...custom
} = props;
const { value, onChange } = input;
return (
<ToggleButtonGroup
{...custom}
value={value}
onChange={(_, newValue) => {
onChange(newValue);
}}
touched={meta.touched.toString()}
>
{children}
</ToggleButtonGroup>
);
};
Main change is getting redux's function onChange and call it with new value, selected when value toggled. There is onChange related to ToggleButtonGroup component and another onChange related to Redux. You need to call latter when ToggleButtonGroup's onChange occurs.
Part of the project is as follows:
...
const INITIAL_STATE = {
email: '',
password: '',
error: null
}
const SignInPage = () => {
return(
<div>
<h2>Sign In</h2>
<SignInForm/>
<SignUpLink/>
</div>
)
}
const SignInFormBase = props => {
const[init,setInit] = useState(INITIAL_STATE);
const onSubmit = () => {
}
const onChange = (event) => {
setInit({
[event.target.name]: event.target.value
})
}
const isInvalid = init.password === '' || init.email === '';
return(
<form onSubmit={onSubmit}>
<input
name='email'
value={init.email}
onChange={onChange}
type='text'
placeholder='Email Address'
/>
<input
...
/>
<button disabled={isInvalid} type='submit'>Sign In</button>
{init.error && <p>{init.error.message}</p>}
</form>
)
}
const SignInForm = compose(
withRouter,
withFirebase
)(SignInFormBase)
export default SignInPage;
export {SignInForm}
The problem is:
When I replace the values in init with setInit in the onChange function, I get the following error.
Warning: A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa) . Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Note: I have the same problem in the password section
You strip part of the code but I assume that you didn't read react hooks documentation good enough. By using hooks you won't get replacement for the setState which was previously merging the values. Therefore when you call
setInit({
[event.target.name]: event.target.value
})
you will replace whole init variable with the new object therefore other field will be pointing to undefined value and react will change component to uncontrolled, then again to controlled when you enter value. If you want to maintain object in state you need to do merging by yourself. Easiest way would be to use object spread as
setInit({
...init, // <- spread old state
[event.target.name]: event.target.value
})
With this code old state will remain between inputs. I would also suggest you to not infer state property from the field name as later you can easily introduce bug you can create curried global onChange as
const onChange = (field) => (event) => {
setInit({
...init,
[field]: event.target.value
})
}
return (
<input onChange={onChange('name')} />
)