Adding HTML element inside a object

Question

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

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:

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

You table component is converting the collumn value toString. Which library are you using to render that table? — uke
– uke, Commented Dec 12, 2020 at 4:21
See this answer stackoverflow.com/questions/64331095/… about how to implement custom cell renderer — uke
– uke, Commented Dec 12, 2020 at 4:35
Can you guys help me? I dont figured it out how to do it with the answer from @uke, heres the codesandbox: codesandbox.io/s/wizardly-worker-t3yzd?file=/src/App.js — evilworld
– evilworld, Commented Dec 12, 2020 at 13:33

lissettdm · Accepted Answer · 2020-12-13 02:52:44Z

1

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

edited Dec 13, 2020 at 2:52

answered Dec 12, 2020 at 15:54

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

lissettdm Over a year ago

I am happy to help.

evilworld Over a year ago

can you help me with one more thing? im trying to render the button on each row so i can copy the nickname from the user of the row, but im having problems, because all buttons are being rendered on each row, as you can see here: codesandbox.io/s/wizardly-worker-t3yzd?file=/src/App.js I tried with forEach too but it didnt work Thanks in advance

lissettdm Over a year ago

Sure, see my edit. Is this what you are trying to get?

evilworld Over a year ago

Sorry. I sent the wrong sandbox link. Check this codesandbox.io/s/funny-rgb-0qhhu?file=/src/App.js line 135. for debugging, use world gentebra, elder druid, min level 8 highest 1000, you will see that its generating every row button on every cell, i need to render only the specific button on each cell. right now if i have 50 registers, it wil render 50 copy button on each cell, containing the button of each register

lissettdm Over a year ago

You don't need the map function, see the edit, also from ValueFormatterParams you can get the user data. Try console.log(ValueFormatterParams), and you will see the data you need.

|

Collectives™ on Stack Overflow

Adding HTML element inside a object

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related