Playground — TabComponent

Tab.js

import React from 'react'
import styled from 'styled-components'

const Tab = ({ onClick, isSelected, children }) => {
	const TabWrapper = styled.li`
		width: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px;
		margin: 1px;
		color: ${props => (isSelected ? `white` : `black`)};
		background-color: ${props => (isSelected ? `black` : `#C4C4C4`)};
		cursor: ${props => (isSelected ? 'default' : `pointer`)};
	`

	return <TabWrapper onClick={onClick}>{children}</TabWrapper>
}

export default Tab

TabComponent.js

import React from 'react'
import styled from 'styled-components'
import TabList from './TabList'
import Tab from './Tab'

const TabComponent = () => {
	const Wrapper = styled.div`
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f6f6f6;
	`

	const tabData = [
		{
			value: '1',
			label: 'A',
		},
		{
			value: '2',
			label: 'B',
		},
		{
			value: '3',
			label: 'C',
		},
		{
			value: '4',
			label: 'D',
		},
		{
			value: '5',
			label: 'E',
		},
	]

	const _renderTabs = tabData => {
		return tabData.map((data, index) => {
			return (
				<Tab value={data.value} key={index}>
					{data.label}
				</Tab>
			)
		})
	}

	return (
		<Wrapper>
			<TabList
				defaultValue="1"
				onChange={value => {
					console.log('value', value)
				}}
			>
				{_renderTabs(tabData)}
			</TabList>
		</Wrapper>
	)
}

export default TabComponent

TabList.js

import React, { Component } from 'react'
import styled from 'styled-components'

const TabListWrapper = styled.ul`
	display: flex;
	flex-direction: row;
	list-style-type: none;
`

export default class TabList extends Component {
	constructor(props) {
		super()

		this.state = {
			value: props.defaultValue,
		}
	}

	select(value) {
		this.setState({ value }, () => {
			this.props.onChange(this.state.value)
		})
	}

	render() {
		const children = React.Children.map(this.props.children, child =>
			React.cloneElement(child, {
				isSelected: child.props.value === this.state.value,
				onClick: () => this.select(child.props.value),
			}),
		)

		return <TabListWrapper>{children}</TabListWrapper>
	}
}