How do I dynamically change the state of components already rendered? - reactjs

Question

I am building my first React app and am doing an app that people can use to split their bills with others. The app is deployed on heroku through this link http://split-calc.herokuapp.com.
The problem I am having is the following:
Lets say you start by typing in 100 for Meal total, 20 for Shared Items, and 10 for tax and tip, resulting in a grand total of 140.
Next, you click the 'Add Person' button, which renders a Person component. Here you will see an input for 'Person subtotal'. Shared will automatically start at 20 because you are so far only splitting the bill with yourself. As you add a value to 'Person Subtotal', the tip, tax and total with dynamically update. Now the problem lies when you click 'Add Person' once again. Person #2 now has a Shard value of 10, which is correct because now the 'Shared Items', which was $20, is now being split by two people (20/2 = 10). The problem is, Person #1 still has a Shared value of $20. Now if you click 'Add Person' once again, the third person will have the correct shared value, but now person #1 and #2 have outdated values. How can I update these dynamically?
Below is all of my code so far.
function Header() {
return (
<header>Split Bill Calculator</header>
)
}
function AddPerson(props) {
return (
<div className='button'>
<button className='addPerson' onClick={props.onClicked}>Add Person</button>
</div>
);
}
function PersonList(props) {
return (
<div>
{props.persons.map((person, index) => (
<span key={index}>{person}</span>
))}
</div>
);
};
class Details extends React.Component {
constructor(props) {
super(props);
this.state = {
meal_total: 0,
shared_items: 0,
tax: 0,
tip: 0,
persons: [],
counter: 1,
};
this.handleClick = this.handleClick.bind(this)
this.handleMealChange = this.handleMealChange.bind(this)
this.handleSharedItemsChange = this.handleSharedItemsChange.bind(this)
this.handleTaxChange = this.handleTaxChange.bind(this)
this.handleTipChange = this.handleTipChange.bind(this)
}
handleMealChange = event => {
this.setState({
meal_total: event.target.value,
});
};
handleSharedItemsChange = event => {
this.setState({
shared_items: event.target.value,
});
};
handleTaxChange = event => {
this.setState({
tax: event.target.value,
});
};
handleTipChange = event => {
this.setState({
tip: event.target.value,
});
};
handleClick = () => {
let counter = this.state.counter + 1
let addPerson = this.state.persons.concat(this.renderPerson())
this.setState({
persons: addPerson,
counter: counter,
});
}
renderPerson = () => {
return (
<Person
person_tax = {this.state.tax}
person_tip = {this.state.tip}
shared_items = {this.state.shared_items}
counter = {this.state.counter}
/>
)
}
renderAddPerson = () => {
return (
<AddPerson
onClicked= {() => this.handleClick()}
/>
);
}
render() {
let grand_total = parseFloat(this.state.meal_total) + ((parseFloat(this.state.meal_total)) * (parseFloat(this.state.tax)/100)) + ((parseFloat(this.state.meal_total)) * (parseFloat(this.state.tip)/100));
return (
<div className='details'>
<div className='order-total'>
<form>
<label htmlFor='meal'>Meal subtotal: ($)</label><br></br>
<input name='meal' placeholder={this.state.meal_total} onChange={this.handleMealChange}></input><br></br>
<label htmlFor='meal'>Shared items: ($)</label><br></br>
<input name='meal' placeholder={this.state.shared_items} onChange={this.handleSharedItemsChange}></input><br></br>
<label htmlFor='tax'>Tax: (%)</label><br></br>
<input name='tax' placeholder={this.state.tax} onChange={this.handleTaxChange}></input><br></br>
<label htmlFor='tip'>Tip: (%)</label><br></br>
<input name='tip' placeholder={this.state.tip} onChange={this.handleTipChange}></input><br></br>
<label htmlFor='total'>Grand Total: ($)</label><br></br>
<input name='total' value={grand_total.toFixed(2)} readOnly></input><br></br>
</form>
</div>
<PersonList persons={this.state.persons} />
{this.renderAddPerson()}
</div>
);
}
}
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
person_tax: props.person_tax,
person_tip: props.person_tip,
person_meal_subtotal: 0,
shared_items: props.shared_items,
}
}
handlePersonSubtotal = event => {
this.setState({
person_meal_subtotal: event.target.value
});
};
render() {
let person_total = parseFloat(this.state.person_meal_subtotal) + parseFloat(this.props.shared_items) + ((parseFloat(this.state.person_meal_subtotal)) * (parseFloat(this.state.person_tax)/100)) + ((parseFloat(this.state.person_meal_subtotal)) * (parseFloat(this.state.person_tip)/100));
let shared_items = this.state.shared_items / this.props.counter;
return (
<div className='person'>
<div className='total-details'>
<h3>Person {this.props.number} </h3>
<form>
<label htmlFor='person-meal'>Personal Subtotal: $ </label>
<input name='person-meal' value={this.state.person_meal_subtotal} onChange={this.handlePersonSubtotal}></input>
</form>
</div>
<div className='breakdown'>
<h3>Should Pay</h3>
<div className='person-details'>
<p>Shared: ${(parseFloat(shared_items)).toFixed(2)}</p>
<p>Tax: ${((parseFloat(this.state.person_tax)/100) * parseFloat(this.state.person_meal_subtotal)).toFixed(2)}</p>
<p>Tip: ${((parseFloat(this.state.person_tip)/100) * parseFloat(this.state.person_meal_subtotal)).toFixed(2)}</p>
<p>Total: ${person_total.toFixed(2)}</p>
</div>
</div>
</div>
)
}
}
class Calculator extends React.Component {
render() {
return (
<div>
<Header />
<Details/>
</div>
)
}
}
ReactDOM.render(<Calculator />, document.getElementById('root'));

Answer 1

You might want to do it later
handleClick = () => {
let counter = this.state.counter + 1
let addPerson = this.state.persons.concat(this.renderPerson())
this.setState({
persons: addPerson,
counter: counter,
});
}
instead of this
try this
handleClick = () => {
let counter = this.state.counter + 1
this.setState({
persons: addPerson,
counter: counter,
}, () => {
let addPerson = this.state.persons.concat(this.renderPerson())
this.setState({
persons: addPerson
});
});
}