jaredpalmer / jaredpalmer/formik

Can I create a multitab using FieldArray?

Open
#2,467 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.