React does not render dynamically


Currently I’m trying to dynamically render a component when a button is clicked. The component renders depending on the state, and I have checked the state is changed when the button is clicked. My hypothesis is that something is wrong in the way I called the dynamic render function. The component itself shows when manually called in JSX. Can anyone help me?

function ShopFilter({filterCategory, filterName}) {
    const [openFilter, setOpenFilter] = useState(false);

    const renderFilterList = () => {
        filterName.map((name, i) => (
            <li key={i}>
                <FilterCheckbox filterName={name} />
            </li>
        ));
    };
    return (
        <div>
            <div onClick={() => setOpenFilter(!openFilter)} className="pt-6 pb-4 flex justify-between items-center border-b border-solid border-opacity-20 border-black">
                <p className="text-lg">{filterCategory}</p>
                <img src="" alt="" />
            </div>
            <div>
                {openFilter ? renderFilterList() : ''}
            </div>
        </div>
    );
}

Source: JavaSript – Stack Overflow

November 14, 2021
Category : News
Tags: javascript | react hooks | react-component | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.