detail에 tab nav 작동을 안해요

[Eden]

전체코드 붙여 넣었습니다. 간단한 작업인데 작동을 안해서 당황스럽네요

뭐가 잘못된건지 몇번을 봐도 못찾겠어요.  탭을 누르면 둘다 0번째 입니다 라고 나옵니다

 

import axios from 'axios';
import React, { useState, useEffect} from 'react';
import { useHistory, useParams } from 'react-router-dom';
import './App.css';
import { Nav } from 'react-bootstrap';
import {CSSTransition} from 'react-transition-group';

function Detail(props){

    let [ alert, setAlert ] = useState(true);
    let [input, setInput] = useState('');
    let [누른탭, 누른탭변경] = useState(0);
    let [스위치, 스위치변경] = useState(false);

    let backBtn = useHistory();
    let {id} = useParams();
    let findProduct = props.shoes.find(x => x.id == id);

    useEffect(() => {

         axios.get();
        // 2초 후에 alert 창 안보이게 하는 것
        let timer = setTimeout(()=>{ setAlert(false) }, 2000);
        return ()=>{clearTimeout(timer)}
    },[ alert  ]);

    return (
      <div className="container">
        {input}
        <input
          onChange={(e) => {
            setInput(e.target.value);
          }}
        />

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

        <div className="row">
          <div className="col-md-6">
            <img
              src="https://codingapple1.github.io/shop/shoes1.jpg"
              width="100%"
              alt="img1"
            />
          </div>
          <div className="col-md-6 mt-4">
            <h4>{findProduct.title}</h4>
            <p>{findProduct.content}</p>
            <p>{findProduct.price}</p>

            <Info 재고={props.재고} />

            <button
              className="btn btn-danger"
              onClick={() => {
                props.재고변경([9, 11, 12]);
              }}
            >
              주문하기
            </button>
            <button
              className="btn btn-danger"
              onClick={() => {
                backBtn.goBack();
              }}
            >
              뒤로가기
            </button>
          </div>
        </div>

        {/* 탭기능 만들기 */}
        <Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
          <Nav.Item>
            <Nav.Link eventKey="link-0" onClikc={()=>{스위치변경(false); 누른탭변경(0)}}>상품설명</Nav.Link>
          </Nav.Item>
          <Nav.Item>
            <Nav.Link eventKey="link-1"  onClikc={()=>{스위치변경(false); 누른탭변경(1)}}>배송정보</Nav.Link>
          </Nav.Item>
        </Nav>
         <CSSTransition in={스위치} classNames="wow" timeout={500}>
           <TabContent 누른탭={누른탭} 스위치변경={스위치변경}/>
         </CSSTransition>
       
    
      </div>
    );
}

function TabContent(props){

    useEffect(()=>{
        props.스위치변경(true); 
    });

    if(props.누른탭 === 0){return  <div>0번째 입니다</div>}
    else if(props.누른탭 === 1){return <div>1번째 입니다</div>}
}

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

export default Detail;

[codingapple]

탭버튼들에있는 onClikc 오타같은데요

[Eden]

휴.. 이런 말도 안되는 실수를 ㅠㅠㅠ 감사합니다 ㅠㅠ

[글쓴이]

글