Toggle Between Grid and List View in React

This article will walk you through the process of changing the layout view from grid to list and back. Note: This article is a follow up from, Render Fetched Data from a GraphQL API in React.

What we’re building.

So far, we have rendered the Rick and Morty API data with a grid layout using the Bootstrap CSS framework and Sass.

Declaring State

The first step is to define the state and its default value in the App.js. Here, toggleViewand setToggleViewrefer to the state value and updater function returned on invoking useState with some initialState. Use a boolean to toggle between the grid and list view. Here, the default value (true) means it’s in grid view, and if it’s false, it will be in list view.

const [toggleView, setToggleView] = useState(true);

Create a button that allows you to toggle between the grid and list view. Add the onClick() property with a console.log() to test that the functionality works as expected.

<div className="trigger-button" onClick={() => { console.log('clicked') }}>

Once you have the click functionality working, swap out the console.log for the updater function and pass in the toggleView state as the parameter:

<div className="trigger-button" onClick={() => setToggleView(!toggleView)}>

We will be using a ternary operator to implement the functionality of the toggle between the grid view and list view. If the default state is true, meaning the grid view is rendered, a list icon will show. If the state is false, then the list view is rendered and the grid icon will show.

Bootstrap Icons

First, install Bootstrap Icons:

$ npm install bootstrap-icons

Then, add it to the custom.scss file, just below the Bootstrap import:

@import "../node_modules/bootstrap/scss/bootstrap.scss";
@import "../node_modules/bootstrap-icons/font/bootstrap-icons.css";

Next, write the ternary operator logic:

{toggleView ? "list" : "grid"}

Search for the grid and list icons:

Swap out the text in the ternary operator to conditionally render the icons we will be using. Be sure to wrap each code snippet in parentheses.

{toggleView 
? (
    <i className="bi bi-list"></i>
  ) : (
    <i className="bi bi-grid"></i>
  )
} 

We want this button to be fixed to the top right corner of the browser window, since we’ve already given the button a class name, trigger-button , use fixed positioning to remove the button from the normal flow and offset it 30 pixels from the right.

Make the icon bigger by adjusting the font-size.

.trigger-button {
    position: fixed;
    right: 30px;
}

.trigger-button i {
  font-size: 2em;
}

Finally, modify the className="row" to include the ternary that toggles between the row which renders the characters in grid layout and the col which renders the characters in list layout.

<div className={toggleView ? "row" : "col"}>

Passing Down Props

The styling for the list view is still not correct. To get this to look like the mockup GIF above, pass the toggleView prop down to the CharacterInfo component:

<CharacterInfo 
  key={character.id} 
  character={character} 
  toggleView={toggleView} 
/>

The CharacterInfo functional component can then take the toggleView prop as a parameter.

const CharacterInfo = ({ character, toggleView }) => {}

Lucky for us, we can use the same ternary operator logic to conditionally render different layouts for the grid and the list.

{toggleView ? "grid" : "list"}

Remember, we want to see the list icon when we are in grid view and the grid icon when we are in list view. Therefore, we need our default toggleView state to be the grid:

 const CharacterInfo = ({ character, toggleView }) => {
    return(
        <div className="col mb-5">
            {toggleView ? (
                <div className="card">
                    <img src={character.image} className="card-img-top" alt={character.name}></img>
                    <div className="card-body" style={{ width: "18rem" }}>
                        <h4 className="card-title">{character.name}</h4>
                        <p className="card-text">
                            {character.gender}
                            <span className="float-end">{character.species}</span>
                        </p>
                    </div>
                </div>
            ) : (
                <div className="list-view">
                    <div className="row">
                        <div className="col-2">
                            <img src={character.image} className="rounded float-start" alt={character.name}></img>
                        </div>
                        <div className="col-10">
                            <h2 className="card-title">{character.name}</h2>
                            <h3 className="card-text">{character.gender}</h3>
                            <h3 className="card-text">{character.species}</h3>
                        </div>
                    </div>
                </div>
            )}

        </div>
    )
}

export default CharacterInfo

The grid layout is what was originally created in the previous article. Now, we need to create a layout for the list view. Let’s start by creating a new CSS class, list-view which duplicates the box-shadow and border style of the card element.

.list-view {
  padding: 5px;
  box-shadow: 5px 5px 1px 1px $softBlack;
  border: 2px solid $softBlack;
  border-radius: 8px;
}

Next, we will use Bootstrap’s grid system to create two columns for each character — one with the image and the other with the text content. You can copy-paste this snippet from the Bootstrap documentation.

<div className="list-view">
  <div className="row">
    <div className="col-2"></div>
    <div className="col-10"></div>
  </div>
</div>

Inside the col-2 element we will place the image and give it a class name rounded float-start .

<div className="col-2">
  <img src={character.image} className="rounded float-start" alt={character.name}></img>
</div>

Give the image a width of 200px to overwrite the the Bootstrap classes rounded float-start:

.list-view img {
  width: 200px;
}

Inside the col-10 element, we will place the text content — name, gender and species. You can also add the character’s status, type and origin.

<div className="col-10">
    <h2 className="card-title">
        Name: {character.name},
        <small className="text-body-secondary"> ({character.gender})</small>
    </h2>
    <p className="h3">
        Species: {character.species}
    </p>
    <p className="h3">Type: {character.type === "" ? "Unknown" : `${character.type}`}</p>
    <p className="h3">Origin: {character.origin.name === "unknown" ? "Unknown" : `${character.origin.name}`}</p>
</div>

Some of the properties have empty string values or unknown values. Use a ternary operator to conditionally render the text you’d like to show instead.

Conclusion

The previous steps walk through the process of toggling the layout view between grid and list using conditional rendering in React, a few lines of custom CSS and Bootstrap classes.