jaredpalmer / jaredpalmer/formik
Can I create a multitab using FieldArray?
- Dominant language
- TypeScript
- Stars
- 34.3k
- Forks
- 2.8k
- PR merge metrics
- No merged PRs in 30d
Description
## How to create multitab form?
I have potentially unlimited amount of tabs to render dynamically (each of them has to be serialized somehow).
My first though was to create a FieldArray and so far my code looks like that:
```
const tabsComponent = ({tabs}) => {
const [currentTabId, setCurrentTabId] = useState(tabs[0].id);
return (
<>
setCurrentTabId(tab.id)}/>
(tabs.map(tab => )
)
}
/>
);
};
```
A Tab picker sets the current tab ID to lifted state (currentTabId). After that the tabsComponent is re-rendered completly but this is something I stuck with since I need to actually render all over 9000 tabs and add a css display:none to make the persistence (on tab change) working.
Is there a better practice to do that? I want to mind that all tabs are rendered from json api response
Contributor guide
Research direction
Begin with the FieldArray render prop and the TabsPicker/TabContainer flow shown in the issue; inspect Formik's FieldArray documentation and existing examples. Consider the work complete when a documented, supported approach for dynamically generated tabs and persistence is identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100