scrimba
Frontend Career Path
Advanced React
Reusability
Remove Star component
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

To see this lesson you need to be logged in. Joining Scrimba is free and gives you access to 20+ courses.Sign up
AboutCommentsNotes
Remove Star component
Expand for more info
index.js
run
preview
console
import React from 'react';
import ReactDOM from 'react-dom/client';
import Star from "./Star"
import Toggle from "./Toggle/index"

/**
* Challenge: refactor our app to use the Toggle.On
* and Toggle.Off components to conditionally render the
* star icons from react-icons. (See Star.js for that code).
*
* Reminders:
* 1. Make sure to copy over the classNames from Star.js too!
* I've added some CSS that we don't want to lose.
* 2. Clicking the Star should flip the Toggle state. Try to
* figure out how you can do that 🤔. Hint: we built something
* that lets us flip the Toggle state back and forth 😉
*/

function App() {
return (
<>
<Toggle>
<Toggle.Button>
<Star />
</Toggle.Button>
<Toggle.On>The toggle is on</Toggle.On>
<Toggle.Off>The toggle is off</Toggle.Off>
</Toggle>
</>
)
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
Console
/index.html
-5:07