Re-Render component React

I am working on an react app that when the user toggles the button pricing will change for the user based on his preference.

I am having trouble having the state re-render after the button is clicked in the parent App, app.js.

My Goal: To have the component re-render with the updated values when the toggle button is changed.

App.js

import './App.css';  import "./components/Switch.css";  import Pricingbox from './Pricingbox';  import { useState } from "react";    function App() {    const [price, setPrice] = useState(1);    const [toggle, setToggle] = useState(false);    const toggler = () =>{        toggle ? setToggle(false): setToggle(true);        console.log(toggle);        toggle ? setPrice(0): setPrice(1);      }        return (      <main>      <header className="our-pricing">        <h1 className="h1">Our Pricing</h1>          <section className="annuall-monthly">            <div class="space-around">              <h3 className="h3">Annually</h3>                <label className="switch1">                    <input type="checkbox" onClick={() => toggler()}/>                    <span className="slider1"/>                </label>              <h3 className="h3">Monthly</h3>            </div>                    </section>          <Pricingbox price={price}/>        </header>            </main>    );  }  export default App;  

Pricingbox.js

import { useEffect, useState } from "react";    const Pricingbox = ({ price }) => {      console.log(price);      const pricingList = [          {              id: 1,               basic: "$19.99",              prof: "$24.99",              master: "$39.99"                         },          {              id: 2,               basic: "$199.99",              prof: "$249.99",              master: "$399.99"            }      ]                const x = pricingList[price];      console.log(x);      const y = x.basic;       const z = x.prof;       const w = x.master;      const [priceBasic, setPriceBasic] = useState(y);      const [priceProf, setPriceProf] = useState(z);      const [priceMaster, setPriceMaster] = useState(w);                     return (               <main>                                    <div className="price-rectangle white-box">                      <div className="pricing-text">                          <p className="pricing-text-space">Basic</p>                          <h2>{priceBasic}</h2>                          <p className="bottom-p">                              <hr></hr>                              500 GB Storage                              <hr></hr>                              2 Users Alllowed                              <hr></hr>                              Send up tp 3GB                              <hr></hr>                           </p>                          <button className="btn purplish-box">Learn More</button>                      </div>                  </div>                  <div className="price-rectangle purplish-box">                      <div className="pricing-text">                          <p className="pricing-text-space">Professional</p>                          <h2>{priceProf}</h2>                          <p className="bottom-p">                              <hr></hr>                              1 GB Storage                              <hr></hr>                              5 Users Alllowed                              <hr></hr>                              Send up tp 10GB                              <hr></hr>                           </p>                          <button className="btn white-box">Learn More</button>                      </div>                  </div>                  <div className="price-rectangle white-box">                      <div className="pricing-text">                          <p className="pricing-text-space">Master</p>                          <h2>{priceMaster}</h2>                          <p className="bottom-p">                              <hr></hr>                              2 GB Storage                              <hr></hr>                              10 Users Alllowed                              <hr></hr>                              Send up tp 20GB                              <hr></hr>                           </p>                          <button className="btn purplish-box">Learn More</button>                      </div>                  </div>              </main>          );  }     export default Pricingbox;  

https://stackoverflow.com/questions/66755741/re-render-component-react March 23, 2021 at 08:44AM