리액트 state로 css변경 함수 질문드립니다.
미해결
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가 나오는데 실제로 작동이 안되네요... 해결법있을까요?
- 리액트
- 리액트js
- state