Question 45838 in CSS Question posted in
Some basic documentation can be found here.

how to reset button style to original of all the button available when clicked any of one – CSS

i am creating a react app, in that i have created a button component.

Button Component :

import React, { useState } from "react";

export default function Button(props){
    const [categoryButton, setCategoryButton] = useState(false);
    function categoryButtonClick (){
        setCategoryButton(true);
    }
    return <button 
    className="button" 
    style={{backgroundColor:categoryButton?"#FD5D5D":"white"}} 
    onClick={categoryButtonClick}>{props.name}</button>
}

Category Component :

import React from "react";
import Button from "./Button";

const categoryArray = [
    {
        id:1, 
        category:"Starter"
    },
    {
        id:2, 
        category:"Cold Beverages"
    },
    {
        id:3,
        category:"Hot Beverages"
    },
    {
        id:4, 
        category:"South Indian"
    },
    {
        id:5, 
        category:"Starter"
    },
    {
        id:6, 
        category:"Cold Beverages"
    },
    {
        id:7,
        category:"Hot Beverages"
    },
    {
        id:8, 
        category:"South Indian"
    },
    {
        id:9,
        category:"Italian"
    }
    ]

export default function Category(){
    return (
        <div className="category-tray">
        {categoryArray.map((categoryTerm) => (
            <Button key={categoryTerm.id} name={categoryTerm.category} />
        ))}
        </div>
    );
}

when a user click on a button (from 12 button available) the background color change to #FD5D5D from white.
now i want that when ever user click on another button the previous button (that got clicked earlier) get the white color back.

i tried using reset function but nothing happen`

Tags:

3

Answers


  1. 0

    I would use context to handle a global state that determines which button was pressed and change its color.

    Login or Signup to reply.
  2. 0

    You have to handle the click event directly on the parent component if you want each child (button component) to know the state (clicked or not) of the other.

    Your parent component :

    import React, {useState} from "react";
import Button from "./Button";

const categoryArray = [
    {
        id:1, 
        category:"Starter"
    },
    {
        id:2, 
        category:"Cold Beverages"
    },
    {
        id:3,
        category:"Hot Beverages"
    },
    {
        id:4, 
        category:"South Indian"
    },
    {
        id:5, 
        category:"Starter"
    },
    {
        id:6, 
        category:"Cold Beverages"
    },
    {
        id:7,
        category:"Hot Beverages"
    },
    {
        id:8, 
        category:"South Indian"
    },
    {
        id:9,
        category:"Italian"
    }
    ]

export default function Category(){

    const [indexClickedButton, setIndexClickedButton] = useState(0);

    return (
        <div className="category-tray">
        {categoryArray.map((categoryTerm) => (
            <Button id={categoryTerm.id} key={categoryTerm.id} pressed={categoryTerm.id === indexClickedButton} onClick={(index) => setIndexClickedButton(index)} name={categoryTerm.category} />
        ))}
        </div>
    );
}

    Your child component :

    import React from "react";

export default function Button({id, name, pressed, onClick}){
    return <button 
    className="button" 
    style={{backgroundColor:pressed?"#FD5D5D":"white"}} 
    onClick={() => onClick(id)}>{name}</button>
}
    Login or Signup to reply.
  3. 0 
    const categoryArray = [
    {
        id:1, 
        category:"Starter"
    },
    {
        id:2, 
        category:"Cold Beverages"
    },
    {
        id:3,
        category:"Hot Beverages"
    },
    {
        id:4, 
        category:"South Indian"
    },
    {
        id:5, 
        category:"Starter"
    },
    {
        id:6, 
        category:"Cold Beverages"
    },
    {
        id:7,
        category:"Hot Beverages"
    },
    {
        id:8, 
        category:"South Indian"
    },
    {
        id:9,
        category:"Italian"
    }
]

// Button Component (Child)
    
const Button = ({active,name,onClickButton}) => {
  return <button className="button" style={{backgroundColor:active?"#FD5D5D":"white"}} onClick={onClickButton}>{name}</button>
}

// Category component (Parent)
const Category = () => {
  const [activeCatId, setActiveCatId] = React.useState(null);
  
  function categoryButtonClick (catId){
    setActiveCatId(catId);
  }
  
  return (
    <div className="category-tray">
      {categoryArray.map(({category,id}) => (
        <Button key={id} name={category} active={activeCatId === id} onClickButton={() => categoryButtonClick(id)}/>
      ))}
    </div>
  );
}

// App Component 
const App = ()=>{
   return (
       <Category/>
   )
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App/>);
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>


<div id="root"></div>

    I suggest that you move your state to the Category component and pass the active state to the Button component. To gain a better understanding, you may review the code I have written. I hope this will be helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search