React prop based rendering not working

Question

So I have this component

import React from 'react';
import ReactDOM from 'react-dom';

import NeoHeader from './header/NeoHeader';
import NeoLoginModal from './modal/NeoLoginModal';

class Neo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {loginModal: false};
    }
    render() {
        return( <NeoHeader/> { this.state.loginModal ? <NeoLoginModal /> : null })
    }
}

ReactDOM.render(
  <Neo/>,
  document.getElementById('react-wrapper')
);

and as you can see, I'm trying to show the component NeoLoginModal when a state prop is set to true. However, building with Laravel mix gives an unexpected token error at the {this..} start. This is documented in multiple places as a correct way to do this, so what's the error about?

Nhor · Accepted Answer · 2017-05-16 22:40:31Z

2

The problem is not within the Laravel Mix but with your component HTML structure. In React you can't render siblings as first-level elements. In order to make your code work you should wrap both child components with a parent tag, for example:

render() {
    return (
        <div>
            <NeoHeader />
            { this.state.loginModal ? <NeoLoginModal /> : null }
        </div>
    );
}

answered May 16, 2017 at 22:40

Nhor

3,9806 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React prop based rendering not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related