Soy muy nuevo en React y necesito ayuda para pasar accesorios.

Estoy tratando de replicar un sintetizador que hice en Vanilla JS y tengo algunos problemas.

En Vanilla JS, puede tomar el valor de entrada a través de querySelector y pasar ese valor a lo que sea: en este caso, quiero pasar el valor de un elemento de entrada al valor de frecuencia de un oscilador, no estoy seguro de cómo hacerlo. También estoy muy confuso cuando se trata de componentes principales y secundarios.

Esto es lo que tengo hasta ahora:

 import {FaPlay} from "react-icons/fa"; import {FaStop} from "react-icons/fa" import Frequency from "./frequency"; <--the child (parent?) component in question const Synthnode = () => { let AudioContext = window.AudioContext || window.webkitAudioContext; let audioContext = new AudioContext(); let osc = audioContext.createOscillator(); osc.type = 'sine'; // osc.frequency.value = 300; <-- when changing the input value in frequency.js, I want this value (300) to change osc.start(); let oscState = false; const toggleSynth = () => { audioContext.resume().then(() => { osc.connect(audioContext.destination); oscState = true; }) } const toggleOffSynth = () => { if (oscState) { osc.disconnect(audioContext.destination); oscState = false; } } return ( <div className="buttons"> <button onClick={toggleSynth}><FaPlay/></button> <button disabled={oscState} onClick={toggleOffSynth}><FaStop/></button> <Frequency /> </div> ); } export default Synthnode

Aquí está el otro componente. Leí otra publicación aquí sobre qué usar en lugar de querySelector y me presentaron Hooks, que es lo que parece que estoy usando aquí:

 import {useState} from 'react'; const Frequency = () => { const [frequency, setFrequency] = useState("") console.log(frequency); return ( <div className="change-frequency"> <input value={frequency} type="range" min="1" max="1000" class="slider" onChange={(e) => setFrequency(e.target.value)}/> </div> ) } export default Frequency;

Entonces, cuando muevo el control deslizante, el valor se registra en la consola correctamente. Simplemente no estoy seguro de cómo pasar ese valor al otro componente en osc.frequency.value