Re-Render component 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;
2 answers
solution1
1 ACCPTED 2021-03-23 00:49:29
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;
solution2
1 2021-03-24 01:06:21
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;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Re-render a React Component
Re-render a child component (React with Hooks)
Re-render single element of an React component
How to re-render component with react hooks
React hook useContext re-render component
How to re-render the same component on React?
Trouble with route and re-render a React component
React component re-render on prop change
Prevent unnecessary re-render of React component
How to force React Component to re-render?
Related Tags