리액트 라우트3 강의를 듣는데 undefined가 나옵니다..

[박지윤]

#DetailPage.js

import React, { useEffect, useState } from 'react'
import { Container, Col, Row, Button } from 'react-bootstrap'
import { useParams } from 'react-router-dom'
import styled from 'styled-components'
import { useDispatch } from 'react-redux'
import { addItem } from '../store'

let Discount = styled.div`
background-color: #ffff00b9;
`

const DetailPage = (props) => {
let [discount, setDiscount] = useState(true)
let [num, setNum] = useState('')
let dispatch = useDispatch();

useEffect(()=>{
let time = setTimeout( ()=>{ setDiscount(false) }, 2000)
return ()=>{
clearTimeout(time)
 }
 }, [])
useEffect(()=>{
if(isNaN(num) == true){
alert("숫자만 !")
 }
 },[num])

let {id} = useParams();
let findItem = props.shoes.filter((x)=>{return x.id == id});
 

return (
<div>
<Container className='detail-container'>
{
alert == true ? 
<Discount>2초 이내 구매시 할인</Discount>
 : null
}
<Row>
<Col className='img-detail'>
< img src={props.img[id]} alt="detail img" />
</Col>
<Col className='buy-detail'>
<input onChange={(event)=>{setNum(event.target.value)}} />
<h4 style={{margin:'50px'}}>{findItem.title}</h4>
{console.log("title???",findItem.title)}
<p style={{margin:'50px'}}>{props.shoes[id].price}</p>
<Button variant="danger" className='btn-detail' onClick={()=>{
dispatch(addItem({id:2, name:'BUFFALO CLD CORIN GRADIENT SNEAKER', count:4},))
 }}>Buy</Button>{' '}
</Col>
</Row>
</Container>
</div>
 )
}

export default DetailPage

-------------------------------

위 내용에서 
<h4 style={{margin:'50px'}}>{findItem.title}</h4>   이렇게 치면 undefined가 나오고 적용이 안됩니다 ,, 
어떻게 해야 할까요 ,,, 제가 멍충이 일까여 ..?

[박지윤]

근데 
<h4 style={{margin:'50px'}}>{findItem[0].title}</h4>
위 내용처럼 findItem[0].title 라고 쓰면 잘 나오긴 합니다 ...
왜 선생님은 배열안에 안 넣었는데 저는 배열이 나오는 거죠 ..? ㅠㅠ

[codingapple]

.filter 쓰고나면 그 자리에 array자료가 남아서 그런가봅니다

[글쓴이]

글