I am trying to create a screen with a split able and moveable feature, but I am facing difficulties in implementing it. I have tried using react split pane, but it is not working as expected. The functionality I am looking for is that when the user clicks on a profile icon in the lower part of the screen, the data in the upper part of the screen should change accordingly. Below is a sample code snippet that outlines the functionality I need. Feel free to implement it here and I will adjust it as needed.
https://i.sstatic.net/kWG6l.jpg
class MainComponent extends React.Component{
constructor(){
super();
this.state={
name:""
}
this.changeDetected=this.changeDetected.bind(this)
}
changeDetected(value){
this.setState({
name:value
})
}
render(){
return(
<Upper_compo data={this.state.name} />
{*Splitting functionality here*}
<Lower_compo changeDetected={this.changeDetected} />
)
}
}
export default MainComponent
//Upper part of Screen
class Upper_compo extends React.component{
constructor(props){
super();
this.state={
name:props.data
}
}
render(){
return(
<>
<h1>{this.state.name}</h1>
</>
)
}
}
export default Upper_compo
//Lower part of Screen
class Lower_compo extends React.component{
constructor(){
super();
this.state={
}
}
render(){
return(
<>
<input type="text" placeholder="name" onChange={this.props.changeDetected(value) />
</>
)
}
}
export default Lower_compo