Great work dear!! Regarding the duplicate log values, that happened because you are assigning deleteHandler on children as well. So once parent's method is invoked and then children's. If you further nest your code one level, you will see 3 values being logged. Anyways very nice explanation! Loved it !!
The solution is complete, you can ignore this. We were just discussing what was happening at that particular point. If you would check the code by the end of the video here [ codesandbox.io/p/sandbox/file-explorer-react-xy8nwv?file=%2Fsrc%2Findex.js%3A14%2C1 ] you will see single log statement now for delete node. Around 29:00 I could see two log statements, I think some intermittent issue might have come because of codesandbox. After creating traverse method, delete node is showing only one undefined statement not two which is the expected behaviour. I actually overlooked the issue and then forgot about it while creating the video but there is nothing wrong.
Around 27:30 I made a mistake, I shouldn't be passing anything in handleLoadMore function as it's handling the entire fetch data functionality. The issue was with sandbox, refresh actually fixed the problem. I though my code was wrong and passed length in confusion thinking I am calling fetch data from there which is not the case.
Great that you found it useful. However, array destructuring doesn't create shallow copy. It only assigns references to the variables you specify in the destructuring pattern. If the elements of the array are objects, the variables will hold references to those objects, not copies of them. But this made me notice one thing, when i am using spread operator for creating shallow copy of the main data there I should be using JSON.parse(JSON.stringify(data)). Because spread operator will only create shallow copy and nested objects will still have the same reference of the state data. Hope this answers your concern. If not then put the timestamp and line number I'll look into it.
Understand the perspective property of CSS. What is perspective property and how to use it. Perspective - codepen.io/doctypecode/pen/gOZYVKr Login Page - codepen.io/doctypecode/pen/gXdmaj
In the body, there is a typo in height, but it doesn’t matter because we are absolutely positioning the div and giving absolute width and height to div - 120px, height and width matter when you want to give relative width and height like 10%, or 50%. Still, if there is any confusion then please comment
Yes the build is production ready, you can submit this to Chrome Web Store. The watch folder is to load live changes of CE, it's only required during development. When you will create build, that you can submit on store or share with team for testing, demo and similar things.
Hiii i am Trying to turn my Reactjs project into Chrome extension i got this error how to solve this error : Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-q3nqK4VzeI/SowYCYQ/tCfo056B/JMutuSpzbJbHczk='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback. Thank you .
Assuming that you are trying to inject script in content js Manifest v3 does not allow inline scripting due to csp changes If that file is included in your “web_accessible_resources” "web_accessible_resources": [{ "resources": [“script.js”], "matches": ["<all_urls>"] }] Then you can send message from content js whenever you want to inject the script like this // content script chrome.runtime.sendMessage({injectSpecific : true}, function(response) { // Script injected, we can proceed if(response.done) { apply_forms(/*...*/); } else { /* error handling */ } }); // background script chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { if(message.injectSpecific){ var filename = getSpecificFilename(sender.url); chrome.tabs.executeScript(sender.tab.id, {file: script.js}, function() { sendResponse({ done: true }); }); return true; // Required for async sendResponse() } }); =========== If you are using webpack and Webpack’s Hot Module Replacement (HMR) creating chunks that you want to load then you can use a script which you include in your background script but only for development . Script link - github.com/doctypecode/react-cext-boilerplate/blob/main/cext-live-reload.js ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-pBPDJb_6Aps.html&?t=47m50s If this doesn't help you then try to explain your project setup and exactly when you are getting this issue
