0

I have the following code in jsx:

<ol>
  {
    [a, b, ..., z].map((item, index) => <li><pre id={index}>{item}<button onClick={() => commands.copyText(this)}>Copy</button></pre></li>)
  }
</ol>

I want to copy the contents of the item on click of my Copy button but I'm not able to pass it as a parameter for some reason, is there a way to copy it using the pre id?

Dale K
  • 25,246
  • 15
  • 42
  • 71
Shubham Swapnil
  • 1
  • 1
    what do you mean by "pre id"? – Jee Mok Aug 10 '19 at 00:45
  • 1
    Would you be able to paste the correctly formatted code? Please refer to [How do I format my code blocks?](https://meta.stackexchange.com/questions/22186/how-do-i-format-my-code-blocks) @JeeMok - His code contained html tags, which rendered the formatting as a block quote thus not shown there. – dance2die Aug 10 '19 at 02:07

1 Answers1

0

I'm not exactly sure what is in the item, but you can definitely pass the item as the parameter in the function:

<ol>
  {
    [a, b, ..., z].map((item, index) => (
      <li>
        <pre id={index}>
          {item}
          <button onClick={() => commands.copyText(item)}>
            Copy
          </button>
        </pre>
      </li>
    ))
  }
</ol>

It'd be helpful if you can describe what you want to achieve in the callback; maybe you don't need the entire item

Jee Mok
  • 6,157
  • 8
  • 47
  • 80
  • Hi, Thanks for your response! The item just contains a string. I wanted to implement a copy to clipboard function that copies the item but where I don't have to pass the item itself but use the id of either 
     or something else to reference the . Basically I don't want to pass the item in the function.  

Something like this : https://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice
     – Shubham Swapnil Aug 16 '19 at 00:00
  • @ShubhamSwapnil I see, but why won't you want to pass the `item` itself into the commands if it is a string? – Jee Mok Aug 16 '19 at 01:41