React: Refs and Memoization - Code Sandbox Embed Displays Wrong File

[columk1]

Describe your suggestion

Issue

The file that appears in the embedded Code Sandbox editor is index.js, which doesn't exist. It is open by default in the editor tab and and an error is displayed.

Suggestion

This should be changed to main.jsx in the embed settings. I think this is possible because the Code Sandbox in the fetching lesson doesn't have this issue. It displays the correct file Profile.jsx by default:

https://www.theodinproject.com/lessons/node-path-react-new-fetching-data-in-react

I believe a query is missing from the url (something like ?file=main.jsx&embed=1). There are some extra characters in the fetch sandbox url so I'm not sure if I can work on the issue without access to wherever these queries are generated.

Path

Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-react-new-refs-and-memoization

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

(Optional) Discord Name

columk

(Optional) Additional Comments

No response

[Asartea]

There are some extra characters in the fetch sandbox url so I'm not sure if I can work on the issue without access to wherever these queries are generated.

Assuming you mean this part: ?embed=1&file=%2Fsrc%2FProfile.jsx%3A1%2C1 (from Fetching Data in React), those are just URLEncoded, and translate to ?embed=1&file=/src/Profile.jsx:1,1

Playing around for it with a bit that last part seems to be in the format: ?file=<full path to file>:<line number to start on>,<character in that line to start on>

[columk1]

Thanks for that, I understand now and was able to get it working.

This change will fix it:
- ?embed=1
+ ?file=%2Fsrc%2FApp.jsx&embed=1

[columk1]

Update

It looks like CodeSandbox have changed their logic as the default view is completely different now.

It renders the right file (App.jsx) now which makes the output correct, but it defaults to package-lock.json in the editor, and now the explorer is hidden so finding the code that is relevant to the lesson is not very intuitive and involves some clicking around.

I think this is a new issue and I don't think it can be solved with url encoding. The codesandbox cloud embedding is still in beta and is missing some customization features.