CODEWITHSUNDEEP
reactjs
sir-haver
sir-haver

Reputation: 3592

Reactjs - how to append a font-awesome icon to ref

I'm trying to use appendChild to add a fontawesome icon to a ref in react. I get the error:

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Using append instead of appendChild can only add text.

class Example extends React.Component {

handle = (e) => {
    e.target.appendChild('<i className="fas fa-minus-circle"/>')
}

render() {
    return (
        <div className="container">
            <button onClick={this.handle}>CLICK HERE</button>
        </div>
    )
}

}

Upvotes: 1

Views: 2601

Answers (2)

Don Brody
Don Brody

Reputation: 1727

Consider changing your approach a little. You can achieve the same result you're expecting with the code below, and it's a little more common to use state and conditional JSX in React:

class Example extends React.Component {
  state = { images: [] }

  handle = () => {
    this.setState({ images: [...images, 'fas fa-minus-circle'] });
  }

  render() {
    return (
      <div className="container">
        <button onClick={this.handle}>CLICK HERE</button>
        {this.state.images.map((image, index) => {
          <i key={index} className={image} />
        })}
      </div>
    );
  }
}

Upvotes: 1

Daniel Huynh
Daniel Huynh

Reputation: 1

You can create ref and attach it to the element you want to add the icon.

class Example extends React.Component{

    constructor(props){
     super(props);
     this.iconRef= React.createRef();
    }

    handle = (e) => {
    e.prenventDefault();
    this.iconRef.current.appendChild('<i className="fas fa-minus-circle"/>')
    }

render() {
    return (
        <div className="container">
            <button ref={this.iconRef} onClick={this.handle}>CLICK HERE</button>
        </div>
    )
}

}

Upvotes: 0

Related Questions