React component data not saved when submit-CodePudding

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

CodePudding user response：

Please pass setRating in starComponent as props

Like below:

<StarRating rating={rating1} updateRating={(e) => setRating1(e)}
  onChange={e => setRating1(e.target.value)}></StarRating>

Now you will get updateRating as props in starComponent. So update rating form star component like below:

import React, { useState} from "react";
import { FaStar } from 'react-icons/fa';
const StarRating = ({rating, updateRating}) =>{ // Here you will get setRating state(State of app component) in props

// const [rating, setRating] = useState(null); // not needed this state here. Update rating value in state which comes form props
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={rating}
                onClick={() =>updateRating(ratingValue)} /> // Update `updateRating` state which comes from app component. 
                <FaStar 
                className="star" 
                color={ratingValue <= (hover || rating) ? "#11C4B0" : "#D3D3D3"}
                size={40}
                onm ouseEnter={() =>setHover(ratingValue)}
                onm ouseLeave={() =>setHover(null)}
                />

            </label>

        );
    })}

    
    </div>
    
  }
  export default StarRating;

You will get updated state in rating1 in app component if any changes occurred from starComponent.

CodePudding user response：

below is my code

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 value={rating1}
  onChange={e => setRating1(e.target.value)}></StarRating>
 <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  type='submit'  variant="outlined" onClick={handleClickOpen}><span >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  type='submit'  onClick={handleClose} ><span >Close</span> </button>
    </DialogActions>
  </Dialog>
</div>

</form>

);
}

export default App;

This is StarRating component that I'm importing:

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

const [rating, setRating] = useState(null);
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}
                onm ouseEnter={() =>setHover(ratingValue)}
                onm ouseLeave={() =>setHover(null)}
                />

            </label>

        );
    })}

    
    </div>
    
  }
  export default StarRating;

Any help ?

CodePudding user response：

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  type='submit'  variant="outlined" onClick={handleClickOpen}><span >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  type='submit'  onClick={handleClose} ><span >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}
                onm ouseEnter={() =>setHover(ratingValue)}
                onm ouseLeave={() =>setHover(null)}
                />

            </label>

        );
    })}

    
    </div>
    
  }
  export default StarRating;