CODEWITHSUNDEEP
javascripthtmlreactjsobject
evilworld
evilworld

Reputation: 43

Adding HTML element inside a object

I'm using this array state to render Infos on a table:

State used to render infos on table

Table rendering levelFilteredPlayers state info

As you guys can see, i need to put a copy button on every row of the table, but i tried inserting the HTML directly to the object it self, but it failed:

Trying to add html directly to the object attribute

HTML not showing the element correctly

What can I do to show this copy button on every row of the table?
Thanks in advance.

Upvotes: 0

Views: 924

Answers (1)

lissettdm
lissettdm

Reputation: 13078

This:

renderCell: (ValueFormatterParams) => {
  <a href="#">Oi </a>; // you are missing return statement
}

should be:

renderCell: (ValueFormatterParams) => {
  return (<a href="#">Oi </a>); 
}

or:

 renderCell: (ValueFormatterParams) => ( <a href="#">Oi </a>)

EDIT: Getting data from row:

  copyHanle = (item) => {
    console.log(item);
  }
  
  //...
  render() {
   const columns = [
      //...
      renderCell: (ValueFormatterParams) => {
         const {row} = ValueFormatterParams;
         return (
            <CopyToClipboard
              text={row.name}
              onCopy={() => this.setState({ copied: true })}
             >
             <button>Copy</button>
          </CopyToClipboard>)
    }
   ]
   //...
  }

See: https://material-ui.com/components/data-grid/rendering/#render-cell

Upvotes: 1

Related Questions