I have some trouble. I tried to show a button on React Table for each row, but its not showing, its just show a blank column. This is my column

columns = [
  
    {
        dataField: "nama_user",
        text: "Nama",
        sort: true,
        style: { overflowWrap: "break-word" }, 
        headerStyle: { backgroundColor: '#2196F3' , color: 'white'}
    },
    {
        dataField: "email",
        text: "Email",
        sort: true,
        headerStyle: { backgroundColor: '#2196F3' , color: 'white'}
    },
    {
        dataField: "",
        text: "Action",
        formatter: this.GetUserAction,
        headerStyle: { backgroundColor: '#2196F3' , color: 'white'},
        classes: "p-1"
    }
];

This is the function that contain the button

GetUserAction = (cell, row, rowIndex, formatExtraData) => {
        return (
            <div>
                <button className="update" onClick={this.handleClickOpen}>
                    Edit
                </button>
                <button className="update" onClick={this.aktivasiUser(row)}>
                   Aktivasi
                </button>
            </div>
        );
    }

Maybe I miss something in my code? Thanks for answering.

CodePudding user response：

Your code is quite unclear to me, if I am not wrong the word Edit is storing some value and that's what you want to display as a function right? If yes then try enclosing that Edit value in curly braces, because in jsx if you want to interpret the content of some variable you have to enclose it into curly brackets {}.

The curly braces are a special syntax to let the JSX parser know that it needs to interpret the contents in between them as JavaScript instead of a string. This process is generally referred to as "interpolation"

Try doing something like this

Let me Know if this works, else try to put some more code so that I can understand

CodePudding user response：

Looks like I found the problem. Need to put columns inside render() instead outside of it.