unable to update star rating from react to mongodb-CodePudding

Hello I am stuck in updating the star rating from react js code using axios to mongodb. The stars are getting clicked but the value is not showing neither getting updating. Here is the front end code:

const StarRating = (props) => {
  console.log(props);
  return (
    <div>
      {Array(5)
        .fill(0)
        .map((_, idx) => (
          <label key={idx}>
            <input
              type="radio"
              name="rating"
              onChange={handleRate}
              value={props.ratingValue}
              checked={idx === props.ratingValue}
            />
            <FaStar color={idx < 3 ? "#01af93" : "#bbb"} />
          </label>
        ))}
    </div>
  );
};

const Report = (props) => {
  
 
  const { advices } = useSelector((state) => state.advice);
  
  const [rate, setRating] = useState(null);

  

  useEffect(() => {
    if (!advices) {
      dispatch(fetchAdvices(history));
    }  
  }); 

  useEffect(() => {
    async function fetchRate() {
      try {
        const { rating } = await axios.get(http://localhost:8080/rating);
        console.log(rating   "user rating");
      } catch(error) {
          console.log(error);
      }
    };

    fetchRate();
  }, []);



 const handleRate = async() => {

  const rate  =  await axios.post(http://localhost:8080/rating, {rating:rate, collegeId: collegeId});
 props.setRating(rate)
  
 }
   
  return (
        
            <>
             <Container> 
  
              <Grid>
              <Fragment>
                <Grid >
          <Card>
         
        <CardContent><> <div>{advices[0}.college_name}
      <StarRating setRating={(val) => setRate(val)} ratingValue={rate} />
    </div></></CardContent>
           </Card>
  </Grid>
  
  
  </>
          
  )};

How to update values of rating based on collegeID from react code. The concept here is to update the value of rating based on the college name showed to user from the score he gets. College name is getting displayed but the value of rating is not getting displayed nor getting changed.

CodePudding user response：

Code seems messed up during copy/paste, is this what you are trying to achive?

const StarRating = (props) => {
  console.log(props)

  // sends rating to database then updates the rating ui
  const handleRate = async (ratingToSave) => {
    const rate = await axios.post('http://localhost:8080/rating', {
      rating: ratingToSave,
      // collegeId should come from wherever stored
      collegeId: collegeId
    })
    props.setRating(rate)
  }

  return (
    <div>
      {Array(5)
        .fill(0)
        .map((_, idx) => (
          <label key={idx}>
            <input
              type="radio"
              name="rating"
              // idx 1 if minimum rating is 1
              onChange={() => handleRate(idx   1)}
              value={props.ratingValue}
              checked={idx === props.ratingValue}
            />
            <FaStar color={idx < 3 ? '#01af93' : '#bbb'} />
          </label>
        ))}
    </div>
  )
}

const Report = (props) => {
  const { advices } = useSelector((state) => state.advice)

  const [rate, setRate] = useState(null)

  useEffect(() => {
    if (!advices) {
      dispatch(fetchAdvices(history))
    }
    // dependency array might need update, test first
  }, [advices])

  useEffect(() => {
    async function fetchRate() {
      try {
        const { rating } = await axios.get('http://localhost:8080/rating')
        console.log(rating   'user rating')
      } catch (error) {
        console.log(error)
      }
    }

    fetchRate()
    // to rerender and refetch after user sends rating to database
  }, [rate])

  // jsx implement again
  return (
    <>
      <StarRating setRating={(val) => setRate(val)} ratingValue={rate} />
    </>
  )
}