Iam trying to write my component to react function but i cant format it properly and my classes and styles dosent apllied on it what is the proper way to convert this component. My all other code is in a fuctions and i also want this to be a functional component
My Component
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Tab from './Tab';
class Tabs extends Component {
static propTypes = {
children: PropTypes.instanceOf(Array).isRequired,
}
constructor(props) {
super(props);
this.state = {
activeTab: this.props.children[0].props.label,
};
}
onClickTabItem = (tab) => {
this.setState({ activeTab: tab });
}
render() {
const {
onClickTabItem,
props: {
children,
},
state: {
activeTab,
}
} = this;
return (
<div className="tabs">
<ol className="tab-list">
{children.map((child) => {
const { label } = child.props;
return (
<Tab
activeTab={activeTab}
key={label}
label={label}
onClick={onClickTabItem}
/>
);
})}
</ol>
<div className="tab-content">
{children.map((child) => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
})}
</div>
</div>
);
}
}
export default Tabs;
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Tab from './Tab';
export default function Tabs ({ children }){
const [activeTab, setActiveTab] = useState(children[0].props.label);
function onClickTabItem(tab){
setActiveTab({ activeTab: tab });
}
return (
<div className="tabs">
<ol className="tab-list">
{children.map((child) => {
const { label } = child.props;
return (
<Tab
activeTab={activeTab}
key={label}
label={label}
onClick={onClickTabItem}
/>
);
})}
</ol>
<div className="tab-content">
{children.map((child) => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
})}
</div>
</div>
);
};
Tabs.propTypes = {
children: PropTypes.node.isRequired
}
So what you wanna do is remove the render
and the constructor
since their is no render
and constructor
in functional component and the next thing you wanna do is use the useState
hook to maintain the state variables.Furthermore , you could pull out children
from the props
passed to the components and for static properties on a function you declare them on the function itself so instead of using static propTypes
you would use Tabs.propTypes
import React from "react";
import PropTypes from "prop-types";
import Tab from "./Tab";
const Tabs = props => {
const { children } = props;
const [state, setState] = useState({
activeTab: props.children[0].props.label
});
const onClickTabItem = tab => {
setState({ activeTab: tab });
};
return (
<div className='tabs'>
<ol className='tab-list'>
{children.map(child => {
const { label } = child.props;
return (
<Tab
activeTab={state.activeTab}
key={label}
label={label}
onClick={()=>onClickTabItem()}
/>
);
})}
</ol>
<div className='tab-content'>
{children.map(child => {
if (child.props.label !== activeTab) return undefined;
return child.props.children;
})}
</div>
</div>
);
};
//Static Props
Tabs.propTypes = {
children: PropTypes.instanceOf(Array).isRequired
};
export default Tabs;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.