I can't get the value of <texterea /> using document.getElementById()

Question

I'm working on review component (to give review and comment) I'm trying to get the value of <texterea /> , and do alert after clicking on the button (Enregistrer) the button contain onClick(SendReview), SendReview it's a function to alert number of star and value of texterea.

const Review = () => {
    const [rating , setRating]=useState(null);
    const [hover , setHover]=useState(null);
    //const [comment , setComment] = useState('');    
   function SendReview(){
       
       alert(rating,document.getElementById("textReview"))
       //console.log(rating +" "+textReview)
   }   
    return (
        <div className="review">
            {[...Array(5)].map((star , i)=>{

                const ratingValue = i+1
                
                return(
                    <label className="label">
                        {/* pour separer les etoils */}
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input 
                            id="star"
                            className="radio"
                            type="radio" 
                            name="rating" 
                            value ={ratingValue}
                            onClick={()=>setRating(ratingValue)}                         
                            hidden
                            />
                        <FaStar 
                              className="star"
                              size={50}
                              color={ratingValue <= (hover || rating) ? "#D1653E" : "#e4e5e9" } 
                              onMouseEnter={()=>setHover(ratingValue)}
                              onMouseLeave={()=>setHover(null)}
                              />
                    </label>         
                );
            })} 
            <br />
            <br />
            <br />
            <br />
            <div>
                <form className="FormTextComment">
                    <textarea 
                            type="textarea"
                            id="textReview"
                            name="commentReview"
                            rows="4" cols="50" 
                            placeholder="  Merci de donner ton avie à propos ce Bricoleur:
                                                                                              - comment il se communique?
                                                                                              - la qualite de son sevice?
                                                                                              - le respect du delai? etc.." 
                            
                            />
                   
                    <br/>
                    <br/>
                    <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button onClick={SendReview}  type="submit" className="btn btn-primary  mb-4">Enregistrer</button>
                </form>
            </div>  
        </div>
    )
}
export default Review;

Answer 1

You should not be using touching the document object directly in a React app. Try binding the value to a state and read from it.

Anyway, to read the value of a text area, you should do document.getElementById("textReview").value . But again, DO NOT DO THIS. This is an anti pattern and kills the whole purpose of using react.

Answer 2

You should store the value of textarea in a useState variable.

I have made some changes in your code see if it works

 const Review = () => { const [rating, setRating]=useState(null); const [hover, setHover]=useState(null); const [review, setReview]=useState(""); //const [comment, setComment] = useState(''); function SendReview(){ alert(`${rating} ${review}`) //console.log(rating +" "+textReview) } return ( <div className="review"> {[...Array(5)].map((star, i)=>{ const ratingValue = i+1 return( <label className="label"> {/* pour separer les etoils */} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input id="star" className="radio" type="radio" name="rating" value ={ratingValue} onClick={()=>setRating(ratingValue)} hidden /> <FaStar className="star" size={50} color={ratingValue <= (hover || rating)? "#D1653E": "#e4e5e9" } onMouseEnter={()=>setHover(ratingValue)} onMouseLeave={()=>setHover(null)} /> </label> ); })} <br /> <br /> <br /> <br /> <div> <form className="FormTextComment"> <textarea onChange={(e)=>setReview(e.target.value)} type="textarea" id="textReview" name="commentReview" rows="4" cols="50" placeholder=" Merci de donner ton avie à propos ce Bricoleur: - comment il se communique? - la qualite de son sevice? - le respect du delai? etc.." /> <br/> <br/> <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <button onClick={SendReview} type="submit" className="btn btn-primary mb-4">Enregistrer</button> </form> </div> </div> ) } export default Review;

Answer 3

Write your code like blow

document.getElementById("textReview").value