리액트 쇼핑몰 디테일 내용 에러

[나윤주]

쌤 다음 내용으로 에러가 뜹니다.

제가 뭐 잘못 쓴게 있을까요??

 

detail.js > 내용 

 

import React, { useState, useEffect } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import styled from 'styled-components';
import './detail.scss';
import {재고context} from './App.js';

let 박스 = styled.div'
padding: 30px;
';
let 제목 = styled.h4'

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

function Detail(props){

let[aler, aler변경] = useState(true);
let[inputData, inputData변경] = useState('');
let 재고 = useContext(재고context);

useEffect(()=>{
//2초 후에 저 alert 창을 안보이게 함
let timer = setTimeout(()=>{ aler변경(false); }, 2000);
console.log('안녕');
},[aler]);
 

let { id } = useParams();
let history = useHistory();
let 찾은상품 = props.shoes.find(x => x.id == id);

return (
<div className="container">
<박스>
<제목 색상="blue">안녕하세요1</제목>
<제목 색상="red">안녕하세요2</제목>
{inputData}
</박스>

<input onChange={ (e)=>{ inputData변경(e.target.value) } } />

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

<div className="my-alert">
<p>재고가 얼마남지 않았습니다.</p>
</div>
<div className="row">
<div className="col-md-6">

</div>
<div className="col-md-6 mt-4">
<h4 className="pt-5">{찾은상품.title}</h4>
<p>{찾은상품.content}</p>
<p>{찾은상품.price}원</p>
 
<Info 재고={props.재고}></Info>

</div>
</div>
</div>
)
}
function Info(props){
return <p>재고 : { props.재고[0] }</p>
}
export default Detail;

[codingapple]

use어쩌구 함수를 사용하고 싶으면 위에서 import 해와야합니다

재고변경함수도 부모 컴포넌트에 있는것이 아닐까요 부모컴포넌트에 있는거 쓰려면 props로 보내줘야합니다 

[글쓴이]

글