changing a button disqbled property without refreshing the page depaneding on a field fetching from the database (ReactJs)

  api, javascript, react-table, reactjs

I am using react table to display some data from the database, I’m using a button inside the table to run a script in the background, I change a value (pk) in the database once the extraction is done, and depending on this value I change the text of the button from extract to done
table

the problem is that the text is not changing directly from "extract" to "done", the page need to be refreshed.
I have thinking to use React state but the issue is that I have multiple buttons

this is the code

export class FileTable extends React.Component {
    constructor(props) {
        super(props);
        this.table = React.createRef();
    }
    state = {
        value: "" ,
        data: [],
        columns: [
            {
                Header: 'Supprimer',
                Cell: row => (
                    <Button
                        variant="outline-dark"
                        block
                        onClick={() => {
                            this.setState({ deleteFileModalShow: true, selectedFileDelete: row.original })
                        }}
                    >
                        <i className="fas fa-trash-alt"></i>
                    </Button>
                )
            },
           
            {
                Header: 'Fournisseur',
                accessor: 'description',
                sortable: true,
                filterable: true
            },
            {
                Header: 'Extraction',
                accessor: 'Extraction',
                Cell: row => (
                    

                    <Button  onClick = {() => {
                        this.props.extract(row.original.pk) ;
                                                       
                        }}
                        disabled = 
                        
                        {
                            row.original.value === null ? false : true 
                        }
                        style = 
                        {
                            row.original.value === null ?  {"backgroundColor"  : "#007bff" } : { pointerEvents: 'none' } 
                        }
                        >
                       { row.original.value === null ?  "Extract" : "Done !"}

        
                    </Button>
                ),
                sortable: false,
                filterable: false
            },
            {
                Header: 'Validation',
                accessor: 'Validation',
                Cell: row => (
                    <Button 

                    onClick = {
                        
                        () =>

                        { this.props.dislayState(true) 
                         this.props.onDropdownSelected(row.original) 
                        }
                     }

                    disabled = 
                        
                    {
                        row.original.value === null ? true : false 
                    }
                    style = 
                    {
                        row.original.value === null ?  { pointerEvents: 'none' }  : {"backgroundColor" : "#007bff"}
                    }
                    >
                        Validation
                    </Button>
                ),
                sortable: false,
                filterable: false
            },
            
        ],
        deleteFileModalShow: false,
        selectedFileDelete: null,
    };





render() {
        return (
            <div  >
                <ReactTable  
                    columns={this.state.columns}
                    data={this.state.data}
                    defaultPageSize={3}
                    style={{
                        textAlign: "center" , 
                      }}
                />
           </div>
        );
    }
}

Source: Ask Javascript Questions

LEAVE A COMMENT