CODEWITHSUNDEEP
javascripthtmlecmascript-6jsxbabeljs
Freduah Gideon
Freduah Gideon

Reputation: 1350

React Is Giving Me The Error Expected an assignment or function call and instead saw an expression

I'm Trying To Do Conditional Rendering In React.js but i keep getting the error

Expected an assignment or function call and instead saw an expression.

Below Is My Code

export default class UserDetailsSnippet extends Component {
    constructor() {
        super()
        this.state = {
            logged_in: false
        }
    }
    loggedIn_lists = [
        { link: '', name: 'Messages' },
        { link: '', name: 'Notifications' },
        { link: '', name: 'Trips' },
        { link: '', name: 'Saved' },
        { link: '', name: 'Host Your Home' },
        { link: '', name: 'Host An Experience' },
        { link: '', name: 'Account' },
        { link: '', name: 'Help' },
        { link: '', name: 'Logout' }
    ]
    loggedOut_lists = [
        { link: '', name: '' },
        { link: '', name: '' },
        { link: '', name: '' },
        { link: '', name: '' },
        { link: '', name: '' }
    ]
    render_lists = () => {
        //I Think The Problem Is How From How I Used The Ternary Operator, I just can't figure out why
        return this.state.logged_in ? 
        this.loggedIn_lists.map((list) => { <div className='snippet userDetailsSnippet'><a href={list.link}>{list.name}</a></div> }) 
        : 
        this.loggedOut_lists.map(list => { <div className='snippet userDetailsSnippet'><a href={list.link}>{list.name}</a></div> })
    }
    render() {
        return (
            this.render_lists
        )
    }
}

Upvotes: 0

Views: 93

Answers (1)

andy mccullough
andy mccullough

Reputation: 9571

You need to invoke render_lists. I.e. this.render_lists(), but also you need to remove the curly parentheses from around you divs in the map to return the JSX. Or explicitly do return <div....

Upvotes: 1

Related Questions