I want to change variant or background of the clicked button (onClick) only in reactjs. How can i achieve it?

Question

What i am trying to do it, when a button is clicked, at the onclick it's variant(material ui button should change from outlined to contained) or simply its background should change. (Please do not suggest for the onFocus property because these is another button in another component, which when clicked focus is lost. So onFocus is not a choice for me here). I am atatching my method here, you can change it (because mine is not working anyhow, it's changing state to true indefinitely)

const [clicked, setClicked] = useState(false);

const categoryChangedHandler = (e) => {

        setCategory(e);    
        
    };

{categories.map((category, index) => {
                    console.log("catogoried.map called and categories= " + category);
                    return <Button className="CategoryButton" 
                                variant={clicked ? "contained" : "outlined"} 
                                color="primary"
                                value={category}
                                onClick={() => {
                                    categoryChangedHandler(category);
                                    setClicked(true);
                                }}
                                style={{ textAlign: 'center' }}
                            >
                                {category}
                            </Button>
                })
}

Is [this](https://codesandbox.io/s/material-demo-forked-2wyrp?file=/demo.tsx) what you want? btw your code in the question should work without changing anything. — NearHuscarl, Apr 11 '21 at 07:05
`onClick={() => { categoryChangedHandler(category); setClicked(true) }}` Firstly, you should write it like that, secondly what do you want to achieve? — Vulwsztyn, Apr 11 '21 at 07:22
No @NearHuscarl, The code i mentioned here is setting setClicked(true) for every Button being mapped (there are more than 10 buttons being mapped from a list). I want to change he variant/background color of just the button which i clicked(onClick), for the rest buttons click state should be false and no change should be made for them. — Yogesh, Apr 11 '21 at 07:37

Someone Special · Accepted Answer · 2021-04-11T07:46:17.283

If you want to show a different color base on it's category, you probably want to change the variant base on the state ( whether it's selected ).

Example

const categories = ['apple', 'banana', 'mango']

const App = () => {

    const [ selected, setSelected ] = useState([])

    const onClick = (value) => {
         //this is a toggle to add/remove from selected array
        if (selected.indexOf(value) > -1) {
          //if exist, remove
          setSelected( prev => prev.filter( item => item !== value )
        } else {
          //add to the selected array
          setSelected( prev => [ ...prev, value ] )
        }   

    }


return <div>
{categories.map((category, index) => {
                 
                    return <Button className="CategoryButton" 
                                /* if the category had been selected, show contained */
                                variant={ selected.indexOf(category) > -1 ? "contained" : "outlined"} 
                                color="primary"
                                value={category}
                                onClick={() => {
                                    onClick(category);
                                }}
                                style={{ textAlign: 'center' }}
                            >
                                {category}
                            </Button>
                })
}</div>
}

The above example keeps an array of categories selected. OF course, if you only want to allow ONE to be selected at each click, then instead of an array, you can use setSelected(value) (where value is the category name), then in your button component use

variant={ selected === category ? 'contained' : 'outlined' }

Remember to change your use state to use string instead of array

const [ selected, setSelected ] = useState('') //enter a category name if you want it to be selected by default

I want to change variant or background of the clicked button (onClick) only in reactjs. How can i achieve it?

1 Answers1