Frontend/React & React.Native &Next.js
React 별점 기능 구현
도전맨
2021. 12. 28. 11:11
반응형
바깥에 함수를 만들고
리액트 렌더링 영역 안에 구현되도록 함
const startRender = (e) =>{
const result = [];
for (let i = 0; i < e.is_score; i++) {
result.push(<FontAwesomeIcon key={i} icon={faStar} color='red'/>);
}
return result;
}
return (
{data.length > 0 ?
data.map((e,i)=>
<Tr>
<Td>{i+1}</Td>
<Td>
<Link color="blue.500" href="#">
{e.item.it_name}
</Link>
</Td>
<Td class='star'>
{startRender(e)}
</Td>
<Td>{e.mb_id}</Td>
<Td>{e.is_subject}</Td>
<Td>{e.is_time}</Td>
</Tr>
)
결과
반응형