React component data not saved when submit

Question

Below is my code, the React app is connected to Node js and the data of comment are saved when submit but it's not working for StarRating component. The comment data is saved in the db table but not the rating

Answer 1

I think the Problem is that you are accessing the rating state in App component but the real state with the value is the rating state of StarRating component. Also, you have passed the props onChange and value to StarRating component but The Props concept is different than the HTML Attributes concept so you definitely need to look into that. Anyway, the possible Solution can be...

import * as React from 'react';
import './App.css';
import StarRating from './StarRating';
import StarRating2 from './StarRating2';
import StarRating3 from './StarRating3';
import { TextArea } from 'semantic-ui-react';
import AlertDialogSlide from './confirmation';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import Slide from '@mui/material/Slide';
import Button from '@mui/material/Button';
import { useState } from "react";


const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});


function App() {
 const [open, setOpen] = React.useState(false);

 const [comment, setComment] = useState("");
 const [rating1, setRating1] = useState("");

 const handleClickOpen = () => {
  setOpen(true);
 };

 const handleClose = () => {
 setOpen(false);
 };

 const onSubmitForm = async e => {
 e.preventDefault();
 try {
  const body = {  rating1, comment };
  const response = await fetch("http://localhost:5000/feedback", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body)
  });

  window.location = "/";
} catch (err) {
  console.error(err.message);
}

};


 return (

<form onSubmit={onSubmitForm} >

<div className="App">
 <img src='solavievelogo.png'></img>
  <hr/>
  <h2>Leave a feedback!</h2>
 <StarRating setRating={setRating1} />
 <hr2/>
 <StarRating2></StarRating2>
 <hr2/>
 <StarRating3></StarRating3>
 <hr2/>

 <p>Please leave a comment about your experience below:</p>
 <TextArea  placeholder=' Type your comment here...' 
  value={comment}
  onChange={e => setComment(e.target.value)}
  ></TextArea>
 <br/>
<button class="Button" type='submit'  variant="outlined" onClick={handleClickOpen}><span class="Button-inner">SEND FEEDBACK</span> </button>

<Dialog
    open={open}
    TransitionComponent={Transition}
    keepMounted
    onClose={handleClose}
    aria-describedby="alert-dialog-slide-description"
  >
    <DialogContent>
    <img src='confirm.png'></img>
      <DialogContentText id="alert-dialog-slide-description">
      <p>Thank you for your message!</p>
      <p> We will be in contact soon..</p>
      </DialogContentText>
    </DialogContent>
    <DialogActions >
    <button class="Button" type='submit'  onClick={handleClose} ><span class="Button-inner">Close</span> </button>
    </DialogActions>
  </Dialog>
</div>

</form>

);
}

export default App;

StarRating Component

import React, { useState} from "react";
import { FaStar } from 'react-icons/fa';
const StarRating = ({setRating}) =>{

const [hover, setHover] = useState(null);
return <div>
    
    <p>Rate your experience from 0 to 5 stars</p>
    {[... Array(5)].map((star, i)=>{
        const ratingValue= i + 1;
        return (
            <label>
                <input 
                type="radio"
                name="rating" 
                value={ratingValue}
                onClick={() =>setRating(ratingValue)} />
                <FaStar 
                className="star" 
                color={ratingValue <= (hover || rating) ? "#11C4B0" : "#D3D3D3"}
                size={40}
                onMouseEnter={() =>setHover(ratingValue)}
                onMouseLeave={() =>setHover(null)}
                />

            </label>

        );
    })}

    
    </div>
    
  }
  export default StarRating;