DEV Community

Fanny
Fanny

Posted on

10 5

How to copy props in react dev tools

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! 😗 😗 ❤️

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (9)

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

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

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

yes, of sure! 😃

Collapse
 
vijayjangid profile image
Vijay Jangid • Edited

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
 
zyzmoz profile image
Daniel Cunha (he/him)

Nice one!

Collapse
 
thayannevls profile image
Thayanne Luiza

Cool!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more