React Buttons and State - how to avoid too many States?

Question

I am still somewhat of a novice to React with much to learn. At the moment I am trying to make a page displaying lightsabers and hilts from Star Wars by clicking a button to show the ones you want. I am doing this by using State, which by the amount of states I currently have seems like the wrong way of doing it.

Here's how I'm doing it: I set a State and put an onClick event that sets the chosen hilt/color to true and the rest to false whilst also rendering information of said hilt/color. It looks like this:

import { ReactComponent as QuiGon } from './qui-gon.svg';
import { ReactComponent as ObiWan } from './obi-wan.svg';
import { ReactComponent as ObiWanOld } from './obi-hilt-old.svg';
import { ReactComponent as DarthMaul } from './darth-maul-hilt.svg';
import { ReactComponent as AhsokaHilt } from './ahsoka-hilt.svg';
import { ReactComponent as AnakinHilt } from './anakin-hilt.svg';
import { ReactComponent as VaderHilt } from './darth-vader-hilt.svg';
import { ReactComponent as KyloHilt } from './kylo-ren-hilt.svg';
import './App.css';

function App() {
  
  const [nonChosen, setNonChosen] = useState(true);
  const [blue, setBlue] = useState(false);
  const [red, setRed] = useState(false);
  const [green, setGreen] = useState(false);
  const [purple, setPurple] = useState(false);
  const [yellow, setYellow] = useState(false);
  const [white, setWhite] = useState(false);

  const [saberOne, setSaberOne] = useState(true);
  const [doubleSaber, setDoubleSaber] = useState(false);
  const [quiGon, setQuiGon] = useState(false);
  const [obiWanNew, setObiWanNew] = useState(false);
  const [obiWanOld, setObiWanOld] = useState(false);
  const [ahsoka, setAhsoka] = useState(false);
  const [anakinHilt, setAnakinHilt] = useState(false);
  const [vaderHilt, setVaderHilt] = useState(false);
  const [kyloHilt, setKyloHilt] = useState(false);


  return (
    

          {/* Colors */}

           

          

          

           

           

           
          
          


          {/* Hilts */}

          

          

          

          

          

          

          

          



  
          {nonChosen && (
            <>
            
            {/*  */}
            
          )}

          {blue && (
          
          )}

          {red && (
          
          )}

          {green && (
          
          )}

          {purple && (
          
          )}

          {yellow && (
          
          )}

          {white && (
          
          )}


        {saberOne && (
              
              
            
          )}

        {doubleSaber && (
          <>
            
            
              
            
            
          )}

        {quiGon && (
              
              
            
          )}

        {obiWanNew && (
              
              
            
          )}

        {obiWanOld && (
              
              
            
          )}

        {ahsoka && (
              
              
            
          )}

        {anakinHilt && (
              
              
            
          )}

        {vaderHilt && (
              
              
            
          )}

        {kyloHilt && (
            //   
            //   
            // 
            <>
            
            
            
              
            
            
          )}





          {nonChosen && (
            Yoyoyo
          )}

          {blue && (
          aasdsd
          )}

          {green && (
          fgfgfg
          )}



    
  );
}

export default App;

It is not completed hence a bit messy, but the problem shows quite nice. I have a lot of States and the buttons gets quite long with all the setX(false).

Is there any way to do this in a better way? I've been pondering for a long time about doing it pure CSS, with if/else etc. but I can't seem to wrap my head around how go get the button to display one thing and leave the rest hidden without having to over-specify it like I already am. Again I am still a novice, so any help would really be appreciated (and again sorry for the spaghetti code)!

user_8417783 · Answer

You can initialize the values in an object and use them as initial state

const initialValues = {
        nonChosen: true,
        blue: false,
        red: false,
        green: false,
        purple: false,
        yellow: false,
        white: false,
        // All other states in this or create a seperate object with seperate useState according to your wish
};

And initialize the state as

  const [colors, setColors] = useState(initialValues);

Setting the value during onClick as

During rendering:

{colors.nonChosen && (
            <>
            
            {/*  */}
            
  )}

user_15612661 · Answer

You can use useReducer hook. Also, you can inline event (for color) or callback event (for hilt). I used two cases.

const initialColorState = {
  nonChosen: false,
  blue: false,
  red: false,
  green: false,
  purple: false,
  yellow: false,
  white: false,
};

const initialHiltState = {
  saberOne: false,
  doubleSaber: false,
  quiGon: false,
  obiWanNew: false,
  obiWanOld: false,
  ahsoka: false,
  anakinHilt: false,
  vaderHilt: false,
  kyloHilt: false
}

function colorReducer(state, action) {
  switch (action.type) {
    case "Blue": {
      return {
        ...state,
        ...initialColorState,
        blue: true,
      }
    }
    case "Red": {
      return {
        ...state,
        ...initialColorState,
        red: true,
      }
    }
    case "Green": {
      return {
        ...state,
        ...initialColorState,
        green: true,
      }
    }
    case "Purple": {
      return {
        ...state,
        ...initialColorState,
        purple: true,
      }
    }
    case "Yellow": {
      return {
        ...state,
        ...initialColorState,
        yellow: true,
      }
    }
    case "White": {
      return {
        ...state,
        ...initialColorState,
        white: true,
      }
    }
  }
}

function hiltReducer(state, action) {
  switch (action.type) {
    case "DoubleSaber": {
      return {
        ...state,
        ...initialHiltState,
        doubleSaber: true,
      }
    }
    case "QuiGon": {
      return {
        ...state,
        ...initialHiltState,
        quiGon: true,
      }
    }
    case "ObiWanNew": {
      return {
        ...state,
        ...initialHiltState,
        obiWanNew: true,
      }
    }
    case "ObiWanOld": {
      return {
        ...state,
        ...initialHiltState,
        obiWanOld: true,
      }
    }
    case "Ahsoka": {
      return {
        ...state,
        ...initialHiltState,
        ahsoka: true,
      }
    }
    case "Anakin": {
      return {
        ...state,
        ...initialHiltState,
        anakinHilt: true,
      }
    }
    case "Vader": {
      return {
        ...state,
        ...initialHiltState,
        vaderHilt: true,
      }
    }
    case "Kylo": {
      return {
        ...state,
        ...initialHiltState,
        kyloHilt: true,
      }
    }
  }
}

function App() {
  const [colorState, colorDispatch] = useReducer(colorReducer, initialColorState)
  const [hiltState, hiltDispatch] = useReducer(hiltReducer, initialHiltState);

  const onHiltClick = useCallback((event) => {
    hiltDispatch({type: event.value});
  }, [hiltDispatch]);
  
  return (
    
      {/* Colors */}

      

      

      

      

      

      

      


      {/* Hilts */}

      

      

      

      

      

      

      

      

      .....
  )
}

export default App;

React Buttons and State - how to avoid too many States?

2 Answers