对于 reactJS 中的标签，如何在间隔内返回值

Question

I have this code, and i want to port it into a tag in my reactJS app. What it's suppose to do is slowly update the lets to reveal my name. Kinda like it's being decrypted.

However it does not seem to return anything, the logic works, since the console.log inside the interval does what it needs to do. But anything outside the interval does not. Can someone help me understand how to get this to work for a html tag in my react app?

   <h3 className="center-align" id="my_name">
       {this.hackerLoad()}
   </h3>
//^^^^^^^ this is the small section i need to edit,
// i didn't want to add a bunch of non relevant code. this is inside my return(); 



   hackerLoad = () => {
        console.log("loaded");
        let hiddenName = [
            "Dwkuow Flexul",
            "Dwkuow Flexua",
            "Dwkuow Flexia",
            "Dwkuow Flecia",
            "Dwkuow Flrcia",
            "Dwkuow Farcia",
            "Dwkuow Garcia",
            "Dwkuoe Garcia",
            "Dwkupe Garcia",
            "Dwkipe Garcia",
            "Dwlipe Garcia",
            "Delipe Garcia",
            "Felipe Garcia",
        ];
        let i = 0;
        let name = "Dwkuow Flexul";
        const createDevName = setInterval(() => {
            i += 1;
            if (i > 12) {
                clearInterval(createDevName);
            }
            name = hiddenName[i];
            console.log(name);
        }, 500);

        return name;
    };

Answer 1

Expanding on my comment, here is how you can make this work. The key thing to remember is that React components only rerender when either their props or their state change. Here is a working solution using state.

Change the relevant section of render to

<h3 className="center-align" id="my_name">
   {this.state.name}
</h3>

In the constructor, include this.state ={name: "Dwkuow Flexul"}

And move the name updating logic to componentDidMount , using setState to update the name:

componentDidMount = () => {
    let hiddenName = [
        "Dwkuow Flexul",
        "Dwkuow Flexua",
        "Dwkuow Flexia",
        "Dwkuow Flecia",
        "Dwkuow Flrcia",
        "Dwkuow Farcia",
        "Dwkuow Garcia",
        "Dwkuoe Garcia",
        "Dwkupe Garcia",
        "Dwkipe Garcia",
        "Dwlipe Garcia",
        "Delipe Garcia",
        "Felipe Garcia",
    ];
    let i = 0;
    let name = "Dwkuow Flexul";
    const createDevName = setInterval(() => {
        i += 1;
        if (i > 12) {
            clearInterval(createDevName);
        }
        this.setState({name: hiddenName[i]});
    }, 500);
};

You should also clear the interval in componentWillUnmount , to avoid memory leaks in case of the component getting destroyed early. (Which will need the interval id to be moved from the local scope of componentDidMount to a property of the entire component.)