Interactive rating component [using ReactJS]

Hi! Congratulations on completing the challenge, it looks great 🥳

I’ll be answering your second question, It’s normal to pass useState to the child component, to let it modify the data as a beginner, But the idea of React, is to build reusable components, which are meant to handle any environment.

(One example is the <input> component, which itself takes a value, and an onChange function callback, thus the input component is no longer responsible for handling the data, but rather, only displays any changes)

So if you wanted to build a more robust version of RatingCard and ThankCard, You should structure it as follows.

<Rating
    rating={rating}
    OnRatingChange={(rating) => setRating(rating)}
    OnSubmit={(submit)=> setSubmit(submit)}
/>

And in the Rating.jsx file,

const activeHandle = (e) => {
 let activeOption = document.getElementsByClassName('active');
 for (let option of activeOption) {
    option.classList.remove('active');
}
 e.target.classList.add('active');
 props.onOptionChange(e.target.innerHTML);
}

You can follow similar logic for submit as well.

Now you do not need to pass setState callback into the child component and let the child do the modifications

Hope this was helpful 😊

Hello, I also use Vite to create my react project. You can try to deploy your app on github by add base in your vite.config.js, which you have done it.

Then, install gh-pages by

npm i gh-pages

And then, add these two scripts to your package.json's "scripts" object:

    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"

so your package.json may look like

   ...
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
  "dependencies": {
  ...

then you can simply run

npm run deploy

to deploy your web to github

Because I am also a beginner, I am not sure the answer of the second question. But I also pass useState to child. So I think it is ok to use.

Hope those would help you.

good jop my bro Congrats on completing your first challenge!🎊🍻 If you have any questions or need further clarification, feel free to reach out to me. Happy Coding! 🎆🎊