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>
                })
}

Answer 1

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