score:0
we had the same issue with redux-form
8.2.6 and @types/redux-form
8.1.5.
but no longer a problem after upgrading to redux-form
8.3.8, @types/redux-form
8.3.5.
score:8
i found the solution. i'm leaving the answer in case anyone had the same problem as me.
import * as react from 'react';
import { field, fieldarray, reduxform, wrappedfieldprops, wrappedfieldarrayprops, injectedformprops, genericfieldarray } from 'redux-form';
import validate from './validate';
interface customfieldprops {
type?: string;
}
const fieldarraycustom = fieldarray as new () => genericfieldarray<field, any>;
const renderfield = (props: wrappedfieldprops & customfieldprops) => {
const { touched, error } = props.meta;
const { input, label, type } = props;
return (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
)
}
const renderhobbies = (props: wrappedfieldarrayprops<undefined>) => {
const { fields } = props;
const { error } = props.meta;
return (
<ul>
<li>
<button type="button" onclick={() => fields.push(undefined)}>
add hobby
</button>
</li>
{fields.map((hobby, index) => (
<li key={index}>
<button
type="button"
title="remove hobby"
onclick={() => fields.remove(index)}
/>
<field
name={hobby}
type="text"
component={renderfield}
label={`hobby #${index + 1}`}
/>
</li>
))}
{error && <li classname="error">{error}</li>}
</ul>
)
}
const rendermembers = (props: wrappedfieldarrayprops<{}>) => {
const { fields } = props;
const { error, submitfailed } = props.meta;
return (
<ul>
<li>
<button type="button" onclick={() => fields.push({})}>
add member
</button>
{submitfailed && error && <span>{error}</span>}
</li>
{fields.map((member, index) => (
<li key={index}>
<button
type="button"
title="remove member"
onclick={() => fields.remove(index)}
/>
<h4>member #{index + 1}</h4>
<field
name={`${member}.firstname`}
type="text"
component={renderfield}
label="first name"
/>
<field
name={`${member}.lastname`}
type="text"
component={renderfield}
label="last name"
/>
<fieldarraycustom name={`${member}.hobbies`} component={renderhobbies} />
</li>
))}
</ul>
)
}
const fieldarraysform = (props: injectedformprops) => {
const { handlesubmit, pristine, reset, submitting } = props
return (
<form onsubmit={handlesubmit}>
<field
name="clubname"
type="text"
component={renderfield}
label="club name"
/>
<fieldarraycustom name="members" component={rendermembers} />
<div>
<button type="submit" disabled={submitting}>
submit
</button>
<button type="button" disabled={pristine || submitting} onclick={reset}>
clear values
</button>
</div>
</form>
)
}
export default reduxform({
form: 'fieldarrays', // a unique identifier for this form
validate
})(fieldarraysform)
Source: stackoverflow.com
Related Query
- How do I use types defined by @types/redux-form in React component with Field and FieldArray?
- How to use useEffect hook properly with array dependency. I passed state from redux store and still my component renders infinitely
- How to test with jest and typescript with types a basic react function component
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- How to use react-alert with React component that is defined as ES6 class
- How to properly use ref with a React class component and styled-components?
- How to properly use TypeScript types with a Styled Component canvas on React
- I want to show and hide a form on toggle of a radio button in React js . Im trying how to use react hooks to hide or show a component on onChange even
- How to use Facebook Javascript SDK to login and force re-authentication with React Web and Typescript inside of a component
- How to use React Redux store in component that modifies and renders the state
- How to get classname or props from NavLink to use with google tag manager with react and redux in a stateless functional component?
- Unable to use the same form component for Add or Edit Mode with React & Redux
- How to replace Component Did update with use Effect and set state in it in react
- React + Redux + Firebase: how to deal with a firebase configuration defined and exported as a class?
- How to use children with React Stateless Functional Component in TypeScript?
- How to mock React component methods with jest and enzyme
- How to use React with Typescript and SASS
- How to test a component with a nested container with React and Redux?
- How do I use local state along with redux store state in the same react component?
- React Redux use HOC with connected component
- How to use vw and vh css with React Native
- How to test form submission in React with Jest and Enzyme? Cannot read property 'preventDefault' of undefined
- how to import HTML file into React component and use it as a component?
- How to connect simple Formik form with Redux store and dispatch an action?
- How to use jest.spyOn with React function component using Typescript
- React Typescript how send props and use it in child component
- How to use Redux Form Wizard with permanent URLS per page
- How to use Django User Groups and Permissions on a React Frontend with Django Rest Framework
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
More Query from same tag
- react-router-dom BrowserRouter not working after build
- Reactjs: Are there advantages to using React components over normal functions?
- How to test a potential null value from an async void function without using @ts-ignore in TypeScript
- React.js, why is setState changing all state values?
- Accessing image upload form without clicking form on React app
- React how to specify animation @keyframes and classes locally
- React Hooks useEffect won't use the correct state
- How to make custom error message using Joi?
- How to save data as int using mongodb compass and koa js. Value automatically convert into String
- Call api before first render in functional component in React.js
- How can I show a loading-skeleton / shimmer effect in ReactJS for an Owl-carousel
- How to fix "Object is possibly undefined"?
- Django Webpack compiling misc JS in brand new Django/ReactJS app to make 21,500 line file
- Adding a new comment duplicate rendered comments
- Cancel async Axios GET request - React hooks
- Alternative for typing a nextjs page - one line
- How to set default camera position directly over .glb model with react-three-fiber
- How can I call hook calls from react class bases components?
- Finding the difference between specific items in an array
- Make part of a string value for React Element bold
- onclick button toggle icon not working in reactjs
- How to run react project after installing dependencies from package.json
- Can't use history.push to async route, React JS
- reactjs - validate enddate is 30 days older
- Semantic UI cards group in React
- React/TypeScript : Make a component interface with certain props, so that its parent can supply such props
- How to pass cli arguments to react craco?
- How to change the background color of a parent component from inside a child component in react, gatsby
- "ComponentDidMount" hook triggers memory-leaks if i'm requesting data from the server
- to create and send React RefObject as prop