How to create "Selected tab" in Next.Js?

January 13, 2023

I am trying to create selected tab in Next.Js.

The User will have the option to search for data it can be Users or Posts, what the user will search for will be selected by clicking on one of the buttons.

Once the user clicks on the button the button will change background to blue.

However I can’t make it to work properly, when the User clicks on the button the .Selected class gets added to the button but the button doesn’t render the CSS.

import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'

import style from '../styles/Search.module.css'

const Search: PageWithLayout = () => {
  const [searchPosts, setPostsSearch] = useState < String > ();

  const setSearchOption = (searchFor: String) => {
    let searchOption = '';

    if (searchFor == 'POSTS') {
      searchOption = 'POSTS';
    } else {
      searchOption = 'USERS';
      let button = document.getElementById('usersOption') as HTMLElement;
      button.className += style.Selected;
    }

    console.log(searchOption);
    setPostsSearch(searchOption);
  }

  return (
    <>
      <div className='pageContent'>
        <div className={style.SearchBarContainer}>
          <div className={style.SearchContainer}>
            <i className="fa-solid fa-magnifying-glass"></i>
            <input className={style.SearchBar} type={'text'} placeholder='Search...' />

          </div>
          <div className={style.SearchOptions}>
            <button id='usersOption' onClick={() => setSearchOption('USERS')}>Users</button>
            <button id='postsOption' onClick={() => setSearchOption('POSTS')}>Posts</button>
          </div>

        </div>
        <div className='SearchedContent'>

        </div>

      </div>
    </>
  )
}

Search.getLayout = function getLayout(page: ReactElement) {
  return (
    <MainLayout>
      {page}
    </MainLayout>
  )
}

export default Search

>Solution :

you can use searchOption data for className style

import React, { MouseEventHandler, ReactElement, useState } from 'react'
import { PageWithLayout } from '../components/Layouts/LayoutConfig'
import MainLayout from '../components/Layouts/MainLayout'

import style from '../styles/Search.module.css'

const Search: PageWithLayout = () => {

    const [searchPosts, setPostsSearch] = useState<String>();


    return (
        <>
            <div className='pageContent'>
                <div className={style.SearchBarContainer}>
                    <div className={style.SearchContainer}>
                        <i className="fa-solid fa-magnifying-glass"></i>
                        <input className={style.SearchBar} type={'text'} placeholder='Search...'/>

                    </div>
                    <div className={style.SearchOptions}>
                        <button id='usersOption' className={searchPosts === 'USERS' ? style.Selected : undefined } onClick={() => setPostsSearch('USERS')}>Users</button>
                        <button id='postsOption' className={searchPosts === 'POSTS' ? style.Selected : undefined } onClick={() => setPostsSearch('POSTS')}>Posts</button>
                    </div>

                </div>
                <div className='SearchedContent'>

                </div>

            </div>
        </>
    )
}

Search.getLayout = function getLayout(page: ReactElement){
    return(
        <MainLayout>
            {page}
        </MainLayout>
    )
}


export default Search