Interactive rating component [using ReactJS]

Community feedback

• 

  Gaurav Singh•440

  @Gaurav4604Posted almost 2 years ago

  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 😊

  Marked as helpful

  1
• 

  Hsienz•550

  @HsienzPosted almost 2 years ago

  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.

  Marked as helpful

  0
• 

  Ahmed Mahrous•980

  @AhmedMahroussPosted almost 2 years ago

  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! 🎆🎊

  0