Lifting State Up — How I used Lifting State Up in my scenario.

I encountered a scenario to pass selected data from SideBar component to Main Content component based on checkbox selection. With this help of information I can filter the data in Main Content component.

After trying other possible scenarios I found Lifting state up will help this scenario.

To lifting up the state I need to pass the data to common component level through the entire hierarchy, from common content I can pass this to another component as props.

App.tsx — This file is the common place for both Sidebar and MainContent components.

App.tsx
import * as React from “react”;
import Sidebar from “./Sidebar/index”;
import Content from “./Content/index”;
import styled from ‘styled-components’;
const Wrapper = styled.div`
display: flex;
max-width: 1600px;
margin: 0 auto;
`
const App = () => {
const [filters, setFilters] = React.useState(false)
const [disableInputIsChecked, setDisableInputIsChecked] = React.useState(true);
const handleCheckboxClick = (event: React.ChangeEvent<HTMLInputElement>) => {
if (!disableInputIsChecked) {
setFilters(!disableInputIsChecked);
}
setDisableInputIsChecked(prevValue => !prevValue);
setFilters(disableInputIsChecked);
}
return (<>
<Wrapper>
<Sidebar filters={filters}
setFilters={setFilters}
handleCheckboxClick={handleCheckboxClick}
disableInputIsChecked={disableInputIsChecked} />,
<Content filters={filters} />
</Wrapper>
</>
)
}
export default App

Checkbox.tsx

Checkbox.tsx
import * as React from “react”
const Checkbox = (props: any) => {
const { filters } = props
return (
<form>
Select Check Box :: <input type=”checkbox” value={props.disableInputIsChecked} onChange={props.handleCheckboxClick} />
</form>
)
}
export default Checkbox

Content.tsx

Content.tsx
import * as React from “react”;
import styled from ‘styled-components’
const center = styled.h1`
alignItems: “center”;`
const Content: React.FC<any> = props => {
return (
<div>
<h1>
Main Content Component</h1><br></br>
<h1>Check box value is: {props.filters ? “SELECTED” : “NOT SELECTED”}
</h1>
</div>)
}
export default Content;

Sidebar.tsx

Sidebar.tsx
import * as React from “react”
import styled from ‘styled-components’
import Checkbox from ‘../Checkbox/index’
const Wrapper = styled.section`
display: flex;
flex-direction: column;
max-width: 250px;
height: 92vh;
min-height: 640px;
border: 5px solid #f1f1f5;
`
const Menu: React.FC<any> = props => {
const [filters, setFilters] = React.useState(props)
return (
<Wrapper>
<h1>Side Bar Component</h1>
<Checkbox filters={filters}
setFilters={setFilters}
handleInputChange={props.handleInputChange}
handleCheckboxClick={props.handleCheckboxClick}
disableInputIsChecked={props.disableInputIsChecked} />
</Wrapper>
)
}
export default Menu

I am lifting up the state from Checkbox.tsx to App.tsx, from there I am passing state to the Content.tsx file.