getElementById in React/JSX

Question

I started my React studies yesterday so I don’t have much knowledge about, and I’d like to know how to give a document.getElementById() in React/JSX, how do I do this?

I tried to use document.getElementById() like I said and tried to App.getElementById(), but it didn’t work out either way...

I have the following code in my App.js:

import React from 'react';
import Header from './components/header';
import Input from './components/inputNum';
import Btn from './components/button';

function getURL() {
    var url = App.getElementById("input-url").value;
    console.log(url);
}

const App = () => 
    <div className="App">
        <Header />
        <div className="content">
            <h1>Vídeos</h1>
            <Input id="input-url"></Input>
            <div className="button-container">
                <Btn onClick={getURL} id="btn-geturl"></Btn>
            </div>
        </div>
    </div>

export default App;

Answer 1

One of the ways to solve this would be to create a component with state. You could create a variable in the state and save in the state the value of the "input-url" when it is changed. This way, by clicking the button and executing the "geturl" function, you would get the value stored in the state. Taking your code, it would have to be changed, since it is as a "stateless Component".

Your code would look like this:

import React, { Component } from "react";
import Header from './components/header';
import Input from './components/inputNum';
import Btn from './components/button';


export default class App extends Component {

  state = {
    url: ""
  };
  
  getURL = e => {
    var url = this.state.url;
    console.log(url);
  }
  
  alterar = e => {
    this.setState({ [e.target.name]: e.target.value });
  };


   render() {
    return (
    <div className="App">
        <Header />
        <div className="content">
            <h1>Vídeos</h1>
            <Input name="url" id="input-url" onChange={this.alterar}></Input>
            <div className="button-container">
                <Btn onClick={this.getURL} id="btn-geturl"></Btn>
            </div>
        </div>
    </div>
    )}
}

Answer 2

In the newer React there is no need to implement classes, and it became somewhat easier to use the hook useState!

Example->

import React, { useState } from 'react';

const Dashboard = React.FC ()=>{
    const [name,setName] = useState('');
    return (
        <input onChange(e => setName(e.target.value)) />
    )
}
export default Dashboard;

How did you see the name is a constant, and the setName serves to set the value or a new value for that constant. O useState() receives within the parentheses the initial value of the variable, in this case an empty string. Every time the input changes these changes will be arrows in the variable name through the setName and made use of a arrow function but a function could be called as well. The value of the input will be inside the .target.value.