重新渲染组件 React

Question

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;

Answer 1

You can fix Pricingbox like this. You can update state of the component whenever price changes by setting [price] as the second argument of useEffect .

import { useEffect, useState } from "react";

const Pricingbox = ({ 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 [priceBasic, setPriceBasic] = useState(0);
    const [priceProf, setPriceProf] = useState(0);
    const [priceMaster, setPriceMaster] = useState(0);
    useEffect(() => {
        const x = pricingList[price];
        console.log(x);
        const y = x.basic; 
        const z = x.prof; 
        const w = x.master;
        setPriceBasic(y);
        setPriceProf](z);
        setPriceMaster](w);  
    }, [price]);

        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;

Answer 2

It seems to me that this could be simpler and that the suggested useEffect is unnecessary. I simplified the code by having only one toggling variable instead of two and by removing the suggested useEffect and replacing it with a simple assignment. Obviously if you need both toggles you could add that back in.

import React from 'react';
import Pricingbox from './Pricingbox';
import { useState } from "react";

function App() {
  const [toggle, setToggle] = React.useState(false);
  const toggler = () => setToggle(!toggle);
  
  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={toggle?1:0}/>
    </header>
    </main>
  );
}
export default App;

Originally the Pricingbox file contained this line:

const [priceBasic, setPriceBasic] = useState(y);

That would only be necessary if you were planning on changing the pricing later. Is that what you wanted to do? If you don't need to do that, then you can simplify the Pricingbox file to this:

import React from 'react';
import { useEffect, useState } from "react";

const Pricingbox = ({ 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];
    const priceBasic  = x.basic;
    const priceProf   = x.prof;
    const priceMaster = x.master;
   
        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;