React. Refresh parent component on button click

Question

How to reload/refresh a parent component on button click.

In the code below i refresh page with javascript vanilla (window.location.reload(false)

Is there a way to reload the parent component or page without refreshing the page?

return product ? (
    <div>
      <div>
        <img src={product.images[0]} alt={product.title} />
      </div>
      <div>
        {product.title}
        <br />
        ${product.price}
        <br />
        {product.description}
      </div>
      <div>
        <button onClick={
          () => { 
            setLiked(!liked)
            if (favProduct) {
              window.location.reload(false)
            }
          }
        }>
          <Icon size="28px" />
        </button>
      </div>
    </div> 
  ) : <p>Loading Product... </p>;

You are refreshing whole page from Child component to re-render Parent component? — ahmetkca
– ahmetkca, Commented Jun 29, 2022 at 14:27
Yes, asking if there is a way to re-render Parent component without refreshing whole page — alejandro
– alejandro, Commented Jun 29, 2022 at 14:30

SlothOverlord · Accepted Answer · 2022-06-29 14:58:28Z

1

Not sure why you would want to do something like that, but here is one way to do it:

const Parent = () => {
const [toggleRefresh, setToggleRefresh] = useState(false)


return (
<Child setToggleRefresh={setToggleRefresh}/>
)
}


const Child = (props) => {

return (
   <button onClick={
          () => { 
            setLiked(!liked)
            if (favProduct) {
              //this will toggle the state of the parent, forcing a parent rerender
              props.setToggleRefresh(prev => !prev)
            }
          }
        }>
)
}

answered Jun 29, 2022 at 14:58

SlothOverlord

2,0451 gold badge9 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React. Refresh parent component on button click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related