Side panel with components loading dynamically based on context - reactjs

Question

With react: how can I render a side panel component with different components depending on the type of action. To give a concrete example:
On the main page, I have a table with some rows. Every row may be of a different "type" (Row 1 may be of type A, Row 2 may be of type B.
When I click on a row that's type A, I would like to render components related to the type A row, and different components for type B row.
You can almost define the panel like a "widget" area, where I can load different components based on different context, or action I perform outside of that area.
Below is what I am trying to do.

Answer 1

This can be done by changing the data stored on state of the selected row type.
For example:
state = {
currently_selected_type : ""
}
In your render function, we can have something like this:
render(){
let SidePanelComponent = null;
if(this.state.currently_selected_type === "A"){
SidePanelComponent = (<div>A</div>);
}
else if(this.state.currently_selected_type === "B"){
SidePanelComponent = (<div>B</div>);
}
return (
<div>
<Table
onClick={
// this type will be passed from the inside Table when rows are clicked based on the row type
(type) => this.setState({currently_selected_type : type})
}
/>
{SidePanelComponent}
</div>
);
}
Inside the Table component you will be rendering the different types of rows, so based on what row is click just send the type to the passed onClick function.
The Table render function can be as follows, for example:
render(){
return (
...
<tr onClick={this.props.onClick("A")}>Row Type A</tr>
<tr onClick={this.props.onClick("B")}>Row Type B</tr>
...
);
}

Answer 2

Ok, I figured it out:
I created a context and a provider
import React, { useState } from 'react';
import PanelContext from './panelContext'
const PanelProvider = ({ children }) => {
const [content, setContent] = useState(undefined);
return (
<PanelContext.Provider
value={{
content: content,
setContent: setContent
}}>
{children}
</PanelContext.Provider>
);
};
export default PanelProvider;
Then I created a usePanel hook:
import PanelContext from "../contexts/panel/panelContext";
const usePanel = () => {
const { content, setContent } = useContext(PanelContext)
return {content, setContent};
}
export default usePanel;
Then in my Table Row component, I use it:
const { setContent } = usePanel();
...
...
const testCallback = (e) => console.log(e.target.value)
...
...
setContent(<Input value="wow!!!!" onChange={testCallback} />)
And finally, on the actual panel component itself:
import { usePanel } from "../../../hooks"
export default ({ }) => {
const { content } = usePanel();
return (
<aside className="contextualizer" id="contextualizer">
<PerfectScrollbar>
<div className="customizer-body">
{content}
</div>
</PerfectScrollbar>
</aside >
);
}
Works perfectly.