728x90
반응형
import React, { useState } from 'react';
import Comments from './Comments';
import styled from 'styled-components';
const StBtn = styled.button`
background-color: ${(props) => props.color};
color: white;
border-radius: 20px;
border: none;
padding: 10px 20px;
margin: 10px;
font-weight: 600;
`;
function CommentsLayout({ comments, setComments, member }) {
const memberList = ['하니', '혜인', '다니엘', '해린', '민지'];
const [clickedMember, setclickedMember] = useState('하니');
const [Clicked, setClicked] = useState('');
const btnClick = (event) => {
setClicked(event.target.value);
return setclickedMember(event.target.value);
};
return (
<StDiv>
{' '}
<div>
{memberList.map((value) => (
<StBtn
color={value === Clicked ? '#e09dd3' : '#8dd2ef'}
key={value}
value={value}
onClick={btnClick}
>
{value}
</StBtn>
))}
</div>
(1) memberList 의 배열 map으로 버튼 5개 생성
(2) Styled-component 적용으로 <StBtn > 적용
(3) color를 props로 줌
- value와 Clicked (useState)가 같으면 분홍색 / 아니면 하늘색 설정
- 배경 색상 : ${(props) => props.color};
- 버튼 클릭시 이벤트 : setClicked(event.target.value); //클릭시 이름 setClicked로 랜더링
끝.
반응형