"Lifting State Up" is a concept in React where you move the state from a
component to its closest common ancestor. This is often done to share state
between multiple components or to manage the state in a higher-level
component that can pass down the state and callbacks as props to its
children.
##Example
import React, { useState } from 'react';
// Child Component
function ChildComponent(props) {
return (
<div>
<p>Count: {props.count}</p>
<button onClick={props.onIncrement}>Increment</button>
</div>
);
}
// Parent Component
function ParentComponent() {
const [count, setCount] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
};
return (
<div>
<h2>Parent Component</h2>
<ChildComponent count={count} onIncrement={handleIncrement} />
</div>
);
}
export default ParentComponent;
class Calculator extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {temperature: ''};
}
handleChange(e) {
this.setState({temperature: e.target.value});
}
render() {
const temperature = this.state.temperature;
return (
<fieldset>
<legend>Enter temperature in Celsius:</legend>
<input
value={temperature}
onChange={this.handleChange} />
<BoilingVerdict
celsius={parseFloat(temperature)} />
</fieldset>
);
}
}