Possible to style button according to if the state value is true or false?-CodePudding

I have two buttons that show two different components when toggling them. For UX reasons (to know which component is showing) I would like to style the buttons according to if the value of the state is true or false (give them an underline and a darker color if the state is true). Is this possible in any way?

This is my GitHub repo: https://github.com/uohman/Portfolio2022

And this is the component where I handle the buttons:

import React, { useState } from 'react'
import ReactDOM from 'react-dom';
import { Subheading } from 'GlobalStyles';
import { FrontendProjects } from './FrontendProjects'
import { GraphicDesignProjects } from './GraphicDesignProjects';
import 'index.css'

export const FeaturedProjects = () => {
  const [buttons, setButtons] = useState([
    { label: 'Development', value: true },
    { label: 'Graphic design', value: false }
  ]);

  const handleButtonsChange = () => (label) => {
    const newButtonsState = buttons.map((button) => {
      if (button.label === label) {
        return (button = { label: button.label, value: true });
      }
      return {
        label: button.label,
        value: false
      };
    });
    setButtons(newButtonsState);
  };

  return (
    <>
      <Subheading><span>Featured projects</span></Subheading>
      <SpecialButton {...{ buttons, setButtons, handleButtonsChange }} />
      {buttons[0].value && <FrontendProjects />}
      {buttons[1].value && <GraphicDesignProjects />}
    </>
  );
};

const SpecialButton = ({ buttons, setButtons, handleButtonsChange }) => {
  return (
    <div className="button-container">

      {buttons.map((button, index) => (

        <button
          key={`${button.label}-${index}`}
          onClick={() => handleButtonsChange({ buttons, setButtons })(button.label)}>
          {button.label.toUpperCase()}
        </button>
      ))}

    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<FeaturedProjects />, rootElement);

I've given the buttons the pseudo element :focus and that nearly solves my problem, but still as a default the buttons are the same color although it is one of the components that is showing. Thankful for suggestions on how to solve this!

CodePudding user response：

You can provide a style props to any html component.
You should pass an object where attributes are camelcased.

<button
  style={{ // double bracket to pass an object
    backgroundColor: yourVariable ? 'red' : undefined // notice css background-color became backgroundColor
  }}
>
  {button.label.toUpperCase()}
</button>

You can do the same with classes

<button
  className={yourVariable && "yourClass"}
>
  {button.label.toUpperCase()}
</button>

CodePudding user response：

You can set styles for button based on a condition.

In this use case, you already have the state button.value which can be used as a condition to set inline styles (or classes) for the mapped button.

Example:

const SpecialButton = ({ buttons, setButtons, handleButtonsChange }) => {
  return (
    <div className="button-container">
      {buttons.map((button, index) => (
        <button
          key={`${button.label}-${index}`}

          //