CODEWITHSUNDEEP
javascriptreactjsrendering
Gijs Erenstein
Gijs Erenstein

Reputation: 1200

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

I have this issue working with react I can't really wrap my head around:

I have a Component inside a wrapper which state is updated by a fetch. depending in the response the components shows something different.

But as soon as the request finishes the error from the title shows up. As Soon as I replace the <i className="fas fa-spinner fa-pulse"></i> with a simple string the problem is solved. But I want to render the <i> tag (or maybe later something else) there. What is the solution here? And should this logic even be placed in the Component or should it be placed in the Container?

Container:

class BookingContainer extends Component {

    constructor(props) {
        super(props);
        this.state = {
            booking : null
        };
        this.findBooking = this.findBooking.bind(this);
    }

    findBooking(bookingId) {
        fetch('http://booking.local:8000/api/bookings/' + bookingId, {
                method : 'GET',
                headers : {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(
                (response) => {
                    if (response.status !== 200) {
                        console.log('Error: ' + response.status);
                        return;
                    }
                    response.json().then ((data) => {
                        console.log(data.data);
                        this.setState({
                            booking : data.data
                        });
                    });
                }
            )
            .catch( (err) => {
                console.log('Error: ', err);
            });
    }

    render() {
        return (
            <Booking booking={this.state.booking}/>
        )
    }

    componentWillMount() {
        this.findBooking(this.props.match.params.id);
    }
}

Component

class Booking extends Component {
    render() {
        return (
            <main className={'l-content l-col'}>
                {this.props.booking ?
                <div className="c-card">
                    <h4>Booking: {this.props.booking.checkIn.iso}</h4>
                    <dl>Some more stuff here...</dl>
                </div> : <i className="fas fa-spinner fa-pulse"></i> }
            </main>
        )
    }
}

Upvotes: 0

Views: 3183

Answers (1)

bdmason
bdmason

Reputation: 569

Wrap the font awesome in another HTML tag.

Font Awesome replaces it with an SVG, so when React comes to remove it, as it's become something else React errors. It seems you can get away with editing the contents of a component, but not the component itself.

There's also a react-fontawesome npm package that is a bit cleaner than wrapping your icons

https://www.npmjs.com/package/react-fontawesome

Upvotes: 5

Related Questions