map 안에서 map 사용하기
결과
내용
- 총 두개의 게시판
- 하나의 게시판에 3개의 각기 다른 내용의 작성글
코드
//json
{
"res": [
{
"project_name": "1",
"creator": "user1",
"service_list": [
{ "service_name": "1", "creation_date": 1644620400 },
{ "service_name": "2", "creation_date": 1644624000 },
{ "service_name": "3", "creation_date": 1644627600 }
]
},
{
"project_name": "2",
"creator": "user2",
"service_list": [
{ "service_name": "4", "creation_date": 1644631200 },
{ "service_name": "5", "creation_date": 1644634800 },
{ "service_name": "6", "creation_date": 1644638400 }
]
}
]
}
const [data, setData] = useState([]);
useEffect(() => {
fetch('data/Project_list.json')
.then(res => res.json())
.then(data => {
setData(data.res);
});
}, []);
return (
<>
//첫번째 map
{data.map(data => {
//두번째 맵에서 사용할 service를 선언
const service = data.service_list;
return (
<Wrapper key={data.project_name}>
<ProWrap>
<div>
<Pro>{data.project_name}</Pro>
<Creator>Creator:{data.creator}</Creator>
</div>
<OneButton buttonText="Add service" />
</ProWrap>
<BoardWrap>
<Table>
<thead>
<tr>
<TheadTd>Service name</TheadTd>
<TheadTd>Creation date</TheadTd>
<TheadTd>ㅤㅤㅤ</TheadTd>
</tr>
</thead>
<tbody>
//두번째 맵
//위에서 선언해 놓은 service에서 다시 맵을 돌린다
{service.map(service => {
return (
<tr key={service.service_name}>
<TbodyTd style={{ paddingLeft: '134.5px' }}>
{service.service_name}
</TbodyTd>
<TbodyTd>{service.creation_date}</TbodyTd>
<TbodyTd style={{ width: '20px' }}>
<TbodyBtn>Delete</TbodyBtn>
</TbodyTd>
</tr>
);
})}
</tbody>
</Table>
</BoardWrap>
</Wrapper>
);
})}
</>
Author And Source
이 문제에 관하여(map 안에서 map 사용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suminllll/map-안에서-map-사용하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)