I feel I’ve basically finished this project, just continuing on it to polish it up a little. Currently just planning on adding animated transitions between colours if possible, as well as max/min widths for the quote box.
My issue is that although I had 12/12 on the tests, it’s now 11/12 because I couldn’t figure out how to make the URL in the <a> tag dynamic using href=“”.
My solution in the end was to create an onClick() function that built and opened the URL in a new window. This seems to work, however Twitter says it is blocked. But closing and reopening that generated tab, the URL seems to work just fine.
So my couple of questions are:
I feel this solution fits what’s being asked, so it’s fair for me to say to myself I’ve completed the project despite it technically being 11/12… however is there something I’m missing, a way I could have built it in the <a> tag?
Because closing and reopening the tab with the auto-generated URL works, it seems that I’ve done it correctly. However is it something I’ve done wrong causing it to be blocked when I click the tweet-quote button, or is it just something going behind the scenes between codepen and twitter? This happened regardless of my onClick() method or a direct href=“” link in the <a> tag.
Any feedback/advice on those questions would be much appreciated! Thanks.
You can’t submit it if it doesn’t pass all the tests.
Set the quote and author data in state and update the state as needed. Then reference the state in the JSX.
Don’t use plain DOM methods. Use React as React was meant to be used. You have data in state and you reference it in the JSX. Whenever you update the state the changed data is automatically in the JSX.
As for the link being blocked, it is because the pen is running inside an iframe. If you test it in the Debug View (use the view menu) it should work with target="_blank"
Ok great, thanks! I assume the “DOM” methods are the document.GetElemenyById() methods?
That had been my solution to get the quote from the JSON, as I was having trouble getting that out of the getQuotes function… But I think I’ve just thought of an idea I can try this evening to get that working without directly manipulating the DOM and using state, like you’ve said.
And yes, the twitter button works as soon as I switch to debugging mode, thanks!
I’m mainly talking about writing content to the DOM, not so much querying the DOM for content although using refs is often the preferred way of doing that.
Setting DOM content using plain DOM methods is a big no-no in React.
It is pretty rare that you would need to do this because what is in the DOM should be there as a result of being set to the DOM by some dynamic React code using state. So you should be able to retrieve that from the React code and not from the DOM.
Any formatting or data transformation applied should be done in code and not re-set afterward back into the state from the DOM (after the formatting/transformation). For example, say you have some currency saved in the state but in the JSX you add the currency symbol (like $). You wouldn’t save that back to the state.
