리액트 state로 css변경 함수 질문드립니다.
486
정개미
작성한 질문수 1
0
import React, { useEffect, useState } from 'react';
import styles from './product_list.module.css';
import Product from './product_item/product_item';
const ProductList = ({products}) => {
const [filterDisplay, setFilterDisplay] = useState('none');
const filterHandler = () => {
if (filterDisplay === 'none') {
setFilterDisplay('display');
console.log(filterDisplay);
} else {
setFilterDisplay('none');
console.log(filterDisplay);
}
}
return (
<section className={styles.product_list}>
<button onClick={filterHandler} className={styles.filterBtn}><i className="fas fa-filter"></i></button>
<div style={{
display: filterDisplay,
}} className={styles.filterBox}>
<div className={styles.bikeBox}>
<button className={styles.bikeBtn}>MTV</button>
<button className={styles.bikeBtn}>하이브리드</button>
<button className={styles.bikeBtn}>로드바이크</button>
</div>
</div>
{/* <button className={styles.btn_regiprod}>버튼</button> */}
{
products.map(product =>
<Product
key={product.id}
product={product}
/>
)
}
</section>
)
};
export default ProductList;
해당 코드입니다.
filterHandler()함수가 작동하면
하단 div의 스타일 display 속성값이 display로 바뀌어서 박스가 보였다 안보였다하게 만들고싶은데,
콘솔에는 변경된 state가 나오는데 실제로 작동이 안되네요... 해결법있을까요?
답변 0
상태(State) 가 "시간이 지남~" 에 대해 질문 있습니다.
0
31
2
해당 강의를 듣고 나면
0
406
1
state 관련 질문이용~
2
392
1
렌더링 차이
0
484
1
counter 변수도 초기값이 없으면 널이 되더라구요.
1
431
1
버튼을 누를 때마다 매번 Form() 을 호출하는 걸까요?
2
366
2
쌤 리액트로 앱 만들수 있는건가요?
0
330
0
const title =<h1>제목</h1>; 에는 괄호가 없어도 되네요?
3
313
2
컴포넌트 구조 질문
0
313
1
리액트 관련 서버 구축 중 server파일에서 발생한 오류
0
285
0
Vuex state 속성 적용 시 다음과 같은 오류가 발생합니다.
2
684
2
강의 7:41 삼항연산자 왜쓰는건가요?
0
682
1
img태그의 src=로컬호스트/이미지 이 부분 질문있습니다!
1
1540
1
state에서 count값 올릴때 +와 ++차이점이 궁금합니다
0
726
1
Create React App에서 node_modules파일 지워졌을 경우
0
1953
1
안녕하십니까 강의 정말 잘봤습니다
0
204
1
redux devtools 에 action 은 넘어오는데 넘어온 payload가 state에 가지는 않습니다.
0
796
1
_app.js 특정페이지에 적용하고싶지 않을때
2
721
1
강의 목록 순서 관련 질문이 있습니다.
1
608
1
React 관련 궁금한게 있습니다.
0
200
1
작동은 잘되는데 콘솔창에 이런 오류가 뜨네요
0
536
1
성격급한사람이...
0
240
1
state 관련 질문 드립니다.
1
212
1
리액트 반복문
0
275
1