쇼핑몰만들기 탭창만드는부분질문입니다

[욱]

import React, { useEffect, useState } from 'react';
import { Nav } from 'react-bootstrap';
import { useHistory, useParams } from 'react-router-dom';
import styled from 'styled-components';
import './Detail.scss';

let Box = styled.div'
padding : 20px;
';

let Boxtitle = styled.h4'

font-size: 25px;
color: ${props => props.color};
';

function Detail(props) {

let 
 = useState(true);
// let [inputData, setInputData] = useState();
let [clickTab, setClickTab] = useState(0);

useEffect(() => {

let timer = setTimeout(() => {
setAlert(false)
}, 2000);
return () => {
clearTimeout(timer)
}
// return function blah() {}; --컴포넌트가 사라질때 실행
}, 
/*[] 넣으면 처음 렌더링시에만 실행*/);

let { id } = useParams();
let history = useHistory();
let findGoods = props.shoes.find(function (goods) {
return goods.id == id
})

return (
<div className="container">
<Box>
<Boxtitle className='red'>Detail</Boxtitle>
</Box>

{/* {inputData}
<input onChange={(e) => setInputData(e.target.value)} /> */}

{
alert === true
? (<div className="my-alert">
<p>재고가 얼마 남지 않았습니다</p>
</div>)
: null
}

<div className="row">
<div className="col-md-6">
<img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{findGoods.title}</h4>
<p>{findGoods.content}</p>
<p>{findGoods.price}원</p>
<Info stock={props.stock}></Info>

<button className="btn btn-danger" onClick={() => {
props.setStock([9, 11, 12])
}}>주문하기</button>
&nbsp;
<button className="btn btn-danger" onClick={() => { history.push('/'); }}>뒤로가기</button>
</div>
</div>

<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
<Nav.Item>
<Nav.Link eventKey="link-0" onClick={() => { setClickTab(0) }}>Option 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1" onClick={() => { setClickTab(1) }}>Option 2</Nav.Link>
</Nav.Item>
</Nav>
<TabContent clickTab={clickTab} />
</div>
)
}

function TabContent(props) {

if (props.clickTab === 0) {
return <div>0번째 내용입니다</div>
} else if (props.clickTab === 1) {
<div>1번째 내용입니다</div>
}
}

function Info(props) {
return (
<p>재고 : {props.stock[0]}</p>
)
}

export default Detail;

 

이렇게했는데초기상태에서는 탭창을 잘표시하는데 두번째탭창을클릭할경우 화면이표시가되지않네요..원일을모르겠습니다.

[codingapple]

둘째탭내용 html 보여줄 때 return이 빠진듯요

[글쓴이]

글