리액트 state로 css변경 함수 질문드립니다.

21.10.13 16:51 작성 조회수 345

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

답변을 작성해보세요.

답변을 기다리고 있는 질문이에요.
첫번째 답변을 남겨보세요!

이 글과 비슷한 Q&A