CODEWITHSUNDEEP
reactjsrenderjsx
Shamant B Naik
Shamant B Naik

Reputation: 1

Select a DOM element in ReactJS

I am relatively new in ReactJS world, I was wondering, how to select the content of h1 tag from the jsx. I tried using refs, but it turns out, it works for input forms. Is there any way we can work it out..!

render(){
        return(
            <div style={{width: '100%', margin: 'auto'}}>
                <Grid className = "landing-grid">
                    <Cell col={12}>
                        <img 
                            // src = "https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Bearded_Man-17-512.png"
                            src = "https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-512.png"
                            alt = "avatar"
                            className = "avatar-img"
                            />
                        <div className="banner-text">
                            <h1>Full Stack Developer</h1>
                            <hr />
                            <p>JavaScript | React | NodeJS | Express | MongoDB | HTML/CSS | Python</p>
                            
                            <div className="social-links">
                                <a href="https://www.linkedin.com/in/shamant-bhimanagoud-naik" rel="noopener noreferrer" target="_blank">
                                    <i className="fa fa-linkedin-square" aria-hidden="true" />
                                </a>

                                <a href="https://github.com/sham1516/" rel="noopener noreferrer" target="_blank">
                                    <i className="fa fa-github-square" aria-hidden="true" />
                                </a>

                                <a href="https://twitter.com/ShamantN" rel="noopener noreferrer" target="_blank">
                                    <i className="fa fa-twitter-square" aria-hidden="true" />
                                </a>
                            </div>
                        </div>
                    </Cell>
                </Grid>
            </div>
        );
    }

I wanna animate

Full Stack Developer

. so how to select..!

Upvotes: 0

Views: 1158

Answers (3)

Nicholas Tower
Nicholas Tower

Reputation: 84902

You do not need a ref for this. You just need to set component state, and use that state in your render method. In this case, the state is just a single number indicating how far into the string we've gotten so far, and the render method needs to create a bunch of spans, and set the class on some of them.

Heres how it might look extracted to a reusable component:

class Fancy extends React.Component {
  constructor() {
    this.state = {
      index: 0,
    }
  }

  componentDidMount() {
    this.intervalId = setInterval(() => {
      this.setState(prev => ({ index: prev.index + 1 }));
    }, 50);
  }

  componentDidUpdate() {
    if (this.state.index >= this.props.text.length) {
      clearInterval(this.intervalId);
    }
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  render () {
    const spans = [];
    for (let i = 0; i < this.props.text.length; i++) {
      spans.push((
        <span key={i} className={i < this.state.index ? 'fade' : undefined}>
          {this.props.text[i]}
        </span>
      ));
    }
    return (
      <React.Fragment>
        {spans}
      </React.Fragment>
    )
  }
}

To be used like:

<div className="banner-text">
  <h1><Fancy text="Full Stack Developer" /></h1>

Upvotes: 1

Mohamad Kh
Mohamad Kh

Reputation: 1

You can import "react-dom" and create a variable like so:

import ReactDOM from "react-dom";
...
someMethod() {
const dom = ReactDOM.findDOMNode(this);
//here you can use usual DOM methods like querySelector() on the dom variable
}
...

Upvotes: 0

emeraldsanto
emeraldsanto

Reputation: 4731

If you really want to select the DOM node, you can use document.querySelector(). Here's the MSDN docs

Upvotes: 0

Related Questions