Answer the question
In order to leave comments, you need to log in
Why do I have a component that has no props or state rerendered?
Why do I have a component that has no props or state rerendered?
I have a Product page containing a form for creating
reviews (FormCreateReview) for the product and the reviews themselves (ReviewsList), there is also a button, when
you click on which these same reviews are shown. But for some reason, along with the
rendering of reviews, the form is also re-rendered, in which there is nothing but jsx. Why
is this happening, how to solve it?
Console output when I click on the "view reviews" button:
RENDER PRODUCT CARD
RENDER FORM
RENDER REVIEW LIST
const Product = () => {
const [isShowReviewsProduct, setIsShowReviewsProduct] = useState(false)
console.log("RENDER PRODUCT CARD")
const toggleIsShowReviewsProduct = () => {
setIsShowReviewsProduct(!isShowReviewsProduct)
}
const reviewsList = isShowReviewsProduct ? <ReviewsList idProduct={idProduct} /> : null
return (
<div>
<h2>Page Product</h2>
<FormCreateReview />
<div className="reviews">
<button onClick={toggleIsShowReviewsProduct}>Показать отзывы</button>
{reviewsList}
</div>
</div>
)
}
const FormCreateReview = () => {
console.log("RENDER FORM ")
return (
<div className="form-reviews">
<h4>Form Create Review...</h4>
<input type="text"/>
<button >Добавить отзыв</button>
</div>
)
}
Answer the question
In order to leave comments, you need to log in
The state of the parent component changes, and a re-render of all its children is called. Everything is correct.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question