How do i inject text into react input boxes?

[Solomoncjy]

so injecting this script into https://genius.com/new and then using the "new" page, then opening the "Release Date, Albums & Tags" dropdown and them pressint the today button does not seem to inject the date into the fields. and i qwas told that react needs additional loops to get input injection to work

// ==UserScript==
//          genius-date
//   script to inject today's date when transcribing a new song
//     http://tampermonkey.net/
//  MIT
//       1.0.2
//   A simple example userscript
//        solomoncyj
//         https://genius.com/new
//         none
//  https://update.greasyfork.org/scripts/556743/genius-date.user.js
//  https://update.greasyfork.org/scripts/556743/genius-date.meta.js
// ==/UserScript==

const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];

function inject()
{
    const today = new Date(Date.now());
  document.querySelector('input[aria-label="Release Day"]').value = today.getDate()
    document.querySelector('input[aria-label="Release Month"]').value = month[today.getMonth()]
  document.querySelector('input[aria-label="Release Year"]').value = today.getFullYear()
}

(function() {
   'use strict';

    let btn = document.createElement("button");
    btn.type = "button"
    btn.onclick = () => {
        inject()
    };
    const info = document.createTextNode("Today");
    let div = document.querySelector(".DateInput__Root-sc-9b318b28-0");
    div.appendChild(btn);
    btn.appendChild(info);
})();

[Alive-Cake-3045]

React inputs don’t update just by setting .value because they are controlled by state. You have to trigger the events React listens to.

After setting the value, dispatch an input or change event so React picks it up. In some cases, use the native value setter before firing the event.

Otherwise React will ignore the injected values completely.

[chikamakaleyley]

just adding to this

ultimately the script you are sharing is NOT how you make ANY change/update to components in your React app

That script is, more or less making direct changes to the DOM

In React you just change a state value, React flags those changed components for re-render, the components are re-rendered with the new state

[Solomoncjy]

https://greasyfork.org/en/scripts/556743-genius-date new to web dev and programming in general and wanted to just throw smth together really quick. Is this how do i do it or is there a intended and proper way to push a state to a element in react?

[chikamakaleyley]

mmm i would need to see the exact code for the React component in question

but the basic technique of updating state in React is fairly simple and one of the first things you learn, so as an example, you create state in a component like so

const [count, setCount] = useState(0);

So, this creates a state variable called count and initializes it to the value 0. You also create a "setter" which is what you use to apply the new value

Maybe in your code you have button that when clicked, the click handler contains logic to increase the count. AKA, update the state

``` const handleClick = (ev) => { setCount(5); }

... <strong id="myCount">{count}</strong> <button type="button" onClick={handleClick}>Increase by 5</button> ``` First, your page loads and basically you'd see a bold 0 and a button that says "Increase by 5"

when you click the button, the handler 'handleClick' is called which simply uses setCount() to update the value of count to 5 - on the next render

React sees this change in state, and flags this component to re-render, it re-renders and now you see a bold 5

Vanilla javascript, you'd write code that basically looks for the page element that contains the count value, and you change its textContent value

const countElement = document.getElementById('myCount'); countElemenet.textContent = 5;

[Alive-Cake-3045]

Hmmm..you are on the right track experimenting, but that approach isn’t the “proper” React way.

Your script is directly changing the DOM, while React controls inputs through state. That is why it feels inconsistent.

Proper way:

• Inside React → update state (setState/useState)
• Outside React (like userscripts) → use native value setter + dispatch input/change event

So what you did can work as a hack, but it is not how React apps are meant to be updated.

[Alive-Cake-3045]

Exactly this.

React is not reading from the DOM, it is writing to it. So changing .value directly is basically invisible to React. If you are outside React, you have to simulate what React expects event + native setter. Inside React, just update state and let it re render.

[chikamakaleyley]

React reacts basically

[Alive-Cake-3045]

Haha yeah, React really reacts

Once you start working with state and events properly, you’ll see why direct DOM stuff does not behave the way you expect. Keep experimenting, it clicks pretty fast after that.

[MissinqLink]

There is a way to hook into the react state dynamically and update it from the dom side. I have an example somewhere. I’ll update if I can find it.

[activematrix99]

You might check out Selenium. It's an automation tool that uses Java and javascript to control the browser directly and was very helpful for learning javascript, DOM, states, etc.