My components used ReactJs Framework that built with Ant Design UI. My stucking is the rendering on tabs content.
I try to nest the LoginForm
component to TabsCard
component.
Note: the LoginForm component can successful independently rendered without nesting case.
Component rendered on image I attachted:
Here is my code:
TabsCard.js
import React, { useState } from 'react'; import { Card } from 'antd'; import LoginForm from '../LoginForm/index.js'; function TabsCard() { const tabList = [ { key: 'tab1', tab: 'Sign in' }, { key: 'tab2', tab: 'Sign up' } ]; const contentList = { tab1: <LoginForm />, tab2: <p>signup</p>, }; const [activeTab, setActiveTab] = useState('tab1'); const handleTabChange = key => { setActiveTab(key); }; return ( <Card style={{ width: '400' }} tabList={tabList} activeTabKey={activeTab} onTabChange={key => { handleTabChange(key); }} > {contentList[setActiveTab]} </Card> ); } export default TabsCard;
Thank you for your support!
Advertisement
Answer
Change from contentList[setActiveTab]
to contentList[activeTab]
Example of full code
import React, { useState } from 'react'; import { Card } from 'antd'; import 'antd/dist/antd.css'; function TabsCard() { const tabList = [ { key: 'tab1', tab: 'Sign in' }, { key: 'tab2', tab: 'Sign up' } ]; const contentList = { tab1: <div>Login form</div>, tab2: <p>signup</p>, }; const [activeTab, setActiveTab] = useState('tab1'); const handleTabChange = key => { setActiveTab(key); }; return ( <Card style={{ width: '400' }} tabList={tabList} activeTabKey={activeTab} onTabChange={key => { handleTabChange(key); }} > {contentList[activeTab]} </Card> ); } export default TabsCard;
I hope I’ve helped you
Have a nice day!