disabling few buttons from group of buttons React

November 18, 2021

I have an array of data

const projectTypeValues = [
{ name: 'Hour', value: 'hour'},
{ name: 'Day', value: 'day'},
{ name: 'Session', value: 'session'},
{ name: 'project', value: 'project'}]

From there I am showing the buttons in a material ui buttonGroup through an loop.

{projectTypeValues.map(element=>
          <Button variant="contained" color="primary">{element.name}</Button>
        )}

how do i make a couple or few buttons from this loop disabled while others are active?

I want to show all the 4buttons but other 3 buttons will be disabled and only session will be active

Thanks for your help

>Solution :

Try like this

{
    projectTypeValues.map(element => (
        <Button
            variant="contained"
            color="primary"
            disabled={element.value !== "session"}
        >
            {element.name}
        </Button>
    ));
}