В чем ошибка в компоненте для копирования кода svg иконки в буфер обмена?

Question

[japan123]

Жду что при нажатии на кнопку код иконки скопируется в буфер обмена. Копируется только [object object]
https://codesandbox.io/s/vv63po7zw5

Answer 1

[Антон Спирин]

JSX это синтаксический сахар над вызовом React.createElement. Поэтому описаный с помощью JSX svg элемент это лишь вызов React.createElement, который возвращает объект, являющийся так называемым Virtual DOM Node, по нему библиотека строит узел в реальном DOM.

Для решения вашей задачи можно использовать ref.

let iconRef;
const getIconRef = node => iconRef = node;

const IconsList = {
  internet: (
    <svg ref={getIconRef} width="22px" height="16px" viewBox="0 0 22 16" version="1.1">
      /* ... */
    </svg>
  ),
];

copyToClipboard = text => {
    var textField = document.createElement("textarea");
    textField.innerText = iconRef;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand("copy");
    textField.remove();
  };

если иконок много, то рациональней использовать renderToString из пакета react-dom/server

import { renderToString } from 'react-dom/server';

textField.innerText = renderToString(/* иконка описанная JSX */);

Comments

[japan123]

Благодарю за ваше решение, только не могу вносить изменения в объект IconsList, т.к. там +100500 иконок, не знаете как можно решить задачу без измеения IconsList?

[Антон Спирин]

japan123, а зачем вам 100500 иконок описанных с помощью JSX?

[japan123]

Антон Спирин, я пошел путем что вы предложили при копировании получаю [object SVGSVGElement]
https://codesandbox.io/s/5w310952rk

[Антон Спирин]

japan123, аа вам сам HTML нужен. Тогда замените:
textField.innerText = iconRef;
на:
textField.innerText = iconRef.outerHTML;

HTMLElement это ведь тоже объект )

[Антон Спирин]

japan123, тут вам больше подойдет не ref, а:

import { renderToString } from 'react-dom/server';

textField.innerText = renderToString(/* иконка описанная JSX */);

[japan123]

Антон Спирин, благодарю

Answer 2

[0xD34F]

Объект-то в строку надо превратить.

Добавляете

import ReactDOMServer from 'react-dom/server';

в начало вашего index.js, затем

textField.innerText = IconsList.internet;

меняете на

textField.innerText = ReactDOMServer.renderToStaticMarkup(IconsList.internet);

Answer 3

[Александр Таратин]

У вас в internet jsx дерево а не строка.
Используйте что-нибудь в стиле https://www.npmjs.com/package/jsx-to-string

Answer 4

[Алексей П]

Потому что вы пытаетесь добавить JavaScript объект в textarea. В результате чего, по умолчанию, вызывается функция объекта toString(), которая возвращает указанное вам значение [object object]. Чтобы проверить выведите в консоль.