Is there a way to ensure that only one button is the focus at a time, rather than multiple buttons being focused simultaneously?

Question

Is there a way to ensure that only one button is the focus at a time, rather than multiple buttons being focused simultaneously?

Can you assist me with styling? I am having an issue where only one of my buttons can turn blue (focus) at a time, instead of multiple buttons turning blue simultaneously.

This is how my components are structured...

import { Container, Content } from './styles';

function PressedButton({ children, ...rest }) {
  const [pressed, setPressed] = useState(false);

  return (
    <Container>
      <Content
        type="button" {...rest}
        pressed={pressed}
        onFocus={() => setPressed(!pressed)}
        >
      {children}
      </Content>
    </Container>
  );
}

The styles for the PressedButton component are as follows...

import styled from 'styled-components';
(...)
export const Content = styled.button`
  (...)

  //props
  background: ${({ pressed }) => pressed ? `linear-gradient(#449fd8, #1b699a)` : '#2a2a2a'};
  color: ${({ pressed }) => pressed ? '#fff' : '#7d7d7d'};

Here is a visual representation of my problem

In my parent component, the rendering looks like this...

tags.forEach((tag) => {
    let output = <PressedButton onClick={() => handleTag(tag)}>{tag}</PressedButton>

javascript css reactjs styles styled-components

Answer 1

Answer №1

To achieve the desired outcome, consider structuring your code like this:

function parentComponent() {
  // vvv new line added here vvv
  const [pressedIndex, setPressedIndex] = useState(null);
  // ... rest of the code
  // vvv additional code compared to your original implementation vvv
  tags.forEach((tag, index) => {
    let output = <PressedButton pressed={pressedIndex === index} onClick={() => {handleTag(tag); setPressedIndex(index)}}>{tag}</PressedButton>
}

In the child component:

function PressedButton({ children, pressed, ...rest }) {
  // vvv removed line vvv
  // const [pressed, setPressed] = useState(false);

  return (
    <Container>
      <Content
        type="button" {...rest}
        pressed={pressed}
        onFocus={() => setPressed(!pressed)}
        >
      {children}
      </Content>
    </Container>
  );
}

This approach involves lifting the state up to the parent component. Following React's state management principles, if a piece of state needs to be shared among buttons, it should reside in the component responsible for rendering those buttons.

Answer 2

To achieve the desired outcome, consider structuring your code like this:

function parentComponent() {
  // vvv new line added here vvv
  const [pressedIndex, setPressedIndex] = useState(null);
  // ... rest of the code
  // vvv additional code compared to your original implementation vvv
  tags.forEach((tag, index) => {
    let output = <PressedButton pressed={pressedIndex === index} onClick={() => {handleTag(tag); setPressedIndex(index)}}>{tag}</PressedButton>
}

In the child component:

function PressedButton({ children, pressed, ...rest }) {
  // vvv removed line vvv
  // const [pressed, setPressed] = useState(false);

  return (
    <Container>
      <Content
        type="button" {...rest}
        pressed={pressed}
        onFocus={() => setPressed(!pressed)}
        >
      {children}
      </Content>
    </Container>
  );
}

This approach involves lifting the state up to the parent component. Following React's state management principles, if a piece of state needs to be shared among buttons, it should reside in the component responsible for rendering those buttons.

Answer 3

Answer №2

Here is a suggestion I have: check out this codesandbox

The concept involves storing the button's identification in the state and adding or removing the ID on click events.

Answer 4

Here is a suggestion I have: check out this codesandbox

The concept involves storing the button's identification in the state and adding or removing the ID on click events.

Is there a way to ensure that only one button is the focus at a time, rather than multiple buttons being focused simultaneously?

Answer №1

Answer №2

Similar questions

Is there a way to invoke a function from a component that is neither a direct child nor parent component?

Safari's approach to image height measurement

Tips on modifying the style of a specific React component without affecting the others

javascript containing the response message

Errors occurred when trying to use Jquery to handle a JSON response

inject spinner during the call and verify status post-call

Using Flask to trigger a Python function that requires input parameters when a button is clicked

Issue with CoffeeScript and three.js: scene not defined

I'm having trouble with my JavaScript function when it is called simultaneously by two different sources

Utilize API information to populate a dynamic selection dropdown menu

Concealing a Vuejs dropdown when clicking outside of the component

Include a Custom Button with an Optional Event Handler

`Place text to the right side of the image`

The character is having trouble displaying correctly in the ajax response

Obtain JSON information and integrate it into an HTML document with the help of

An Exploration into the Error Situations of NPM Request Library

Use Django, Ajax, and Jquery to incrementally add items to a "cart" by selecting checkboxes one by one

What is the process of converting a default export to a named export?

The parameter necessary for [Route: admin.request.update] is missing. The required URI is admin/request/{request}, and the missing parameter is 'request'

Is there a solution for overflow indicators in combination with a FlexBox column layout?