Redux Form v6 - Generating dynamic form with unique keys loses focus on entering value
Date : March 29 2020, 07:55 AM
To fix the issue you can do That happens because of the unique id that you provide as a key to the Field component like key={_.uniqueId('field_')} So what happens is whenever your component is rerendered, react checks for the key to render the DOM, now because your key is uniquely generated each time the component is rendered and map function runs, your Field component is replaced everytime with a new one and hence you see this problem. <fieldset>
{ fields.map((field, index) => <Field key={index} { ...field } component={ FeedbackInput } />) }
</fieldset>
|
Dynamic Form Name for redux-form
Date : March 29 2020, 07:55 AM
wish of those help In order to achieve this you will need to introduce a new component that wraps the reduxForm Higher-Order Component (HOC). Something like: class DynamicFilterComponent extends React.Component {
componentWillMount() {
this.Filter = reduxForm({
form: this.props.dynamicName
})(FilterComponent)
}
render() {
const Filter = this.Filter
return <Filter {...this.props} />
}
}
mapStateToProps() { ... }
mapDispatchToProps() { ... }
let FilterContainer = connect(
mapStateToProps,
mapDispatchToProps
)(DynamicFilterComponent)
|
Passing dynamic form values redux-form
Date : March 29 2020, 07:55 AM
Hope that helps You can use initialValues from redux-form, if you already know what value to put in which form. In your case you want to give a props as value so you need to pass it via mapStateToProps function mapStateToProps(state, ownProps) {
return {
initialValues: {
first_name: ownProps.propThatHasFirstName
}
}
export default reduxForm({
form: 'profile-edit-form',
destroyOnUnmount: false,
enableReinitialize: true,
})(ProfileEditComponent);
|
Dynamic Form in React with Redux-Form
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , To dynamically create a form, you will need to build your data differently. You need fields object that will look like this(with the matches id): const fieldsObject = ['match1', 'match2', 'match3']
const resultsObject = {
match1_home: 1,
match1_away: 3
}
const MyForm = (props) => {
const { handleSubmit, fields } = props;
return (
<form onSubmit={handleSubmit}>
{fields.map(match => (
<div key={match}>
<Field
name={`${match}_home`}
component="input"
/>
<Field
name={`${match}_away`}
component="input"
/>
</div>
))}
<button type="submit">Submit</button>
</form>
)
}
<MyForm initialValues={resultsObject} fields={fieldsObject} onSubmit={this.submitForm}/>
|
How do you pass in a dynamic form name in redux form?
Date : March 29 2020, 07:55 AM
|