0

Estoy haciendo aprendiendo react y quiero entender el hook useRef() pero hay algo que no me queda claro y donde si se puede utilizar y donde no ya que el tener este codigo en react y yo quiero acceder solamente al segundo elemento span:

import './presentation.css'

export function Presentation () {
  const secText = useRef(null)

  useEffect(() => {
    const textSecond = secText.current
    console.log(textSecond.current)
  }, [])
  return (
    <>
      <div ref={secText} className='conteiner-presentation'>
        <span className='text first-text'>Yo soy </span>
        <span className='text sec-text'> Facundo Romo</span>
      </div>
    </>
  )
}

lo cual funciona pero en la consola me lanza el siguiente error introducir la descripción de la imagen aquí pero no lo termino de entender y buscando en internet no encontre algo que me pueda explicar una forma de acceder a ese elemento span unicamente

1
  • asegurate de importar useRef, el ref={secText} debe ir en el segundo span no en el contenedor si queres referirte al segundo span, quita el undefined de la definicion del useRef Commented el 13 jun. 2023 a las 1:07

1 respuesta 1

0

Te falta importar las funciones useEffect y useRef de react. También, la referencia se la debes asignar al segundo span que es al que quieres acceder. Una vez asignado textSecond, ese ya no tiene current, ese ya es el elemento como tal.

const {useEffect,useRef} = React

function App(props) {
  const secText = useRef(null);

  useEffect(() => {
    const textSecond = secText.current;
    console.log(textSecond.textContent); //" Facundo Romo"
  }, []);


  return (
      <div className='conteiner-presentation'>
        <span className='text first-text'>Yo soy </span>
        <span ref={secText} className='text sec-text'> Facundo Romo</span>
      </div>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( <App/>)
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.