React toggle className on button click

Question

I wanna change my layout between grid and list with 2 buttons. I am very new to react, and I thought to use State, my button logic seems to work(when i console.log) but I don't know how to change div classNames based on State. I tried something but it doesnt work(see below). Whatever button I click grid or list my style changes but only for the first click, then nothing happens.

const Restaurants = () => {
    const [isGrid, layoutToggle] = useState({
        value: true
    });


    console.log(isGrid);

    return (
        <div className="restaurants">

            <button onClick={() => layoutToggle({ isGrid: true })}>
                Grid
            </button>
            <button onClick={() => layoutToggle({ isGrid: false })}>
                List
            </button>

            <div className={isGrid["value"] ? "layout-grid" : "layout-list"}>
                {restaurants.map(restaurant => (
                    <Restaurant/>
                ))}
            </div>
        </div>
    );
};

Gangadhar Gandi · Accepted Answer · 2020-01-28 19:22:56Z

1

The problem is in the button elements, You should the change the state with the value property not the isGrid property.

<button onClick={() => layoutToggle({ value: true })}>
   Grid
</button>
<button onClick={() => layoutToggle({ value: false })}>
   List
</button>

answered Jan 28, 2020 at 19:22

Gangadhar Gandi

2,26214 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Marios G Over a year ago

thanks man that was it. Is there a better way to use useState (name and value) for what i did?

Gangadhar Gandi Over a year ago

The more simplified way is instead of using object we can directly use boolean value as state; const [isGrid, layoutToggle] = useState(true); <div className={isGrid ? "layout-grid" : "layout-list"}>

Marios G Over a year ago

ok but if i use const [isGrid, layoutToggle] = useState(true) how do i use layoutToggle() to set true or false?

Gangadhar Gandi Over a year ago

onClick={() => layoutToggle(true)} // true or false based on the type of button

Collectives™ on Stack Overflow

React toggle className on button click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related