Controlled disabled button Material UI - React JS

user_9568259 0
Viewed 16545

I have a quick question . I am trying to disable a button conditionally. Basically if something is selected from my table then i allow the button to be available otherwise it is disabled . I know that MUI expects a boolean in order to disable or enable the button so from my array i am doing a forEach loop and get the value of the selected . But it seems that nothing happens even thought if i have the value of the selected . Any ideas what am i doing wrong ? My array :

data: [{
 ....
 selected : true / false
 ....
}]

My button:

 <Tooltip title='Download'>
        <Button
            className={classes.root}
            key='DownloadAll'
            disabled={data.forEach(element => element.selected)}
            color='primary'
            onClick={(event) => buttonOnClick()}
        >
            <SvgIcon
                component={faDownload}
            />
        </Button>
    </Tooltip>
material-ui reactjs javascript
2 Answers

If you need to have boolean returned, simply use Array.prototype.some():

Following is a quick live-demo to see that approach in action:

const { useState } = React,
      { render } = ReactDOM,
      rootNode = document.getElementById('root')
      
const App = () => {
  const [tableData, setTableData] = useState([
          {id:0, content: 'row1', selected: false},
          {id:1, content: 'row2', selected: false},
          {id:2, content: 'row3', selected: false}
        ]),
        onSelect = _id => {
          const tableDataShallowCopy = [...tableData],
                targetRowIdx = tableDataShallowCopy.findIndex(({id}) => id == _id)
          if(targetRowIdx>-1){
            tableDataShallowCopy.splice(targetRowIdx,1, {
              ...tableData[targetRowIdx],
              selected: !tableData[targetRowIdx].selected
            })
            setTableData(tableDataShallowCopy)
          }
        }
  return (
    <div>
      <table>
        <thead>
          <tr><th>Header</th></tr>
        </thead>
        <tbody>
          {
            tableData.map(({id,content,selected}) => (
              <tr 
                onClick={() => onSelect(id)}
                className={selected ? 'selected' : ''}
                key={id}
              >
                <td>
                  {content}
                  <input 
                    type="checkbox"
                    value={id}
                    checked={selected}
                  />
                </td>
              </tr>
            ))
          }
        </tbody>
      </table>
      <button disabled={!tableData.some(({selected}) => selected)}>Button</button>
    </div>
  )        
}  

render(
  <App />,
  rootNode
)
.selected {
  background-color: orange;
  color: #fff;
}

tr {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

user_112990530

You might want to create a local state that is set by the action "if something is selected from your table " then use the state value to toggle your button disability.

user_118003040
Related