React how to use a state from another component? - react-hooks

Question

I am new to programming and try to learn to react and hands-on some real projects. I am trying to sort out a FreeCodeCamp drum-machine program and I am stuck at trying to use a state from one component to another one. Thank you for any help from you guys.
Please see the source component below:
import React,{useState} from 'react';
import './DrumControl.scss';
import { Switch } from 'antd';
import 'antd/dist/antd.css';
const DrumControl = () => {
const [isOn,setIsOn] = useState(false);
const [bankName,setBankName] = useState("Heater 1");
const [info,setInfo] = useState("");
const onOff = () =>{
isOn ? setIsOn(false) : setIsOn(true);
setInfo("");
}
const changeBankName = ()=>{
bankName === "Heater 1" ? setBankName("Piano") : setBankName("Heater 1");
setInfo(bankName);
}
console.log(info);
return (
<div className="drum-control">
<header>
<a className="navbar-brand text-dark" href="#">
ABC
</a>
</header>
<p className="text-dark fw-bold">Power</p>
<Switch onClick={onOff}/>
<p id="display">{info}</p>
<input type="range" className="form-range" min="0" max="100" id="volume-control"/>
<p className="text-dark fw-bold">Bank</p>
<Switch onClick={changeBankName}/>
</div>
);
}
export default DrumControl;
I am trying to use the bankName from the codes above in following component
import React,{useState} from 'react';
import {bankOne,bankTwo} from './Bank.js';
import {bankName} from './DrumControl';
const Drumpad = () =>{
const [bank,setBank] = useState(bankOne);
const changeBank = () =>{
bankName === "Heater 1" ? setBank(bankOne) : setBank(bankTwo);
}
return(
<h1 className="drum-pad">{bankOne[0].id}</h1>
);
}
export default Drumpad;
Anyway or alternative to sort this out ?

Answer 1

Ok all sorted now, import pubhub.js
https://www.npmjs.com/package/pubsub-js
publisher from drumcontrol
const pubsub = () =>{
PubSub.publish('changeBank',{bankName})
}
subscribe in Drumpad
useEffect(
()=>{
const mySub = PubSub.subscribe('changeBank',chooseBank);
return () => {
PubSub.unsubscribe(mySub);
};
},[]
);
const chooseBank = (changeBank,{bankName}) => {
bankName === 'Heater 1' ? setBank(bankOne) : setBank(bankTwo);
}