loading...

How to copy props in react dev tools

fannyvieira profile image Fanny ・1 min read

Today, while I was working on a bug, I found myself needing to copy a props of a React component, so I realized that the react dev tools did not have this functionality, after some searches, i found the solution.

EDIT: react dev tools has a pretty simple solution, thanks to Eugene

  1. Open the ReactDevTools in Browser
  2. Select the component that contains the props, in that you need copy (when you make this, the browser will be create a variable for save the component that you clicked, generally the name is $r)
  3. Open the console, and save the prop in another variable
  4. Use the copy method and "don't worry, be happy! :D" as me.

Cheers! 😗 😗 ❤️

Discussion

pic
Editor guide
Collapse
arimourao profile image
Ari Mourao

Nice tip! Only now I'm having the opportunity to get deeper with React. This will be helpful.

Collapse
fannyvieira profile image
Fanny Author

I'm really glad to hear that. thanks! ❤️ ❤️

Collapse
karataev profile image
Eugene Karataev

Nice tip! There is also an easier way - just right-click on an element and select 'Copy element props'.
copy props

Collapse
fannyvieira profile image
Fanny Author

I didn't know, thank you! ❤️

Collapse
ben profile image
Ben Halpern

Nice! This is gonna help a future searcher.

Collapse
fannyvieira profile image
Fanny Author

yes, of sure! 😃

Collapse
zyzmoz profile image
Collapse
vijskt profile image
Vijay Jangid

Reminds me of my first encounter of the same situation. I was aware of $, $$, $1 in DOM element panel, but no idea about React.
Definately a help for fellow dev.

Collapse
thayannevls profile image