CODEWITHSUNDEEP
javascriptreactjs
andretg12
andretg12

Reputation: 19

What am I doing wrong with my if statements?

I'm porting a website I had build already for another project into React and wanted to set a state for my navbar and was trying to set up my conditionals to render my pages first but it keeps throwing syntax error

I tried changing the {} enclosing to if to () to see if that did anything. I also tried wrapping my if inside {()} and nothing

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  render() {
    return (
      <div>
        <NavBar />
        {if (this.state.page === 1) {
          return (<Products />)
        } else if(this.state.page === 2) {
          return (<Contact />)
        } else {
          <Landing />
        }}
        <Footer />
      </div>
    );
  }
}

Upvotes: 0

Views: 107

Answers (6)

Harsh Makadia
Harsh Makadia

Reputation: 3443

Here is a quick demo

function NavBar() {
  return <h1>Hello Navbar</h1>;
}

function Footer() {
  return <h1>Hello, Footer</h1>;
}

function Landing() {
  return <h1>Hello, Landing</h1>;
}

function Contact() {
  return <h1>Hello, Contact</h1>;
}

function Products() {
  return <h1>Hello, Products</h1>;
}


class App extends React.Component {
  state = {
    page: 1,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent() {
    if (this.state.page === 1) {
      return <Products />;
    } else if(this.state.page === 2) {
      return <Contact />;
    } else {
      return <Landing />;
    }
  }

  render() {
    return (
      <div>
        <NavBar />
        {this.renderContent()}
        <Footer />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 0

Code Maniac
Code Maniac

Reputation: 37755

One alternate way is to use a mapper object and default value

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent(val) {
    let obj = {
      1: Products,
      2: Contact,
    }
    return obj[val] || Landing
  }

  render() {
    let Component = this.renderContent(this.state.page)
    return (
      <div>
        <NavBar />
          <Component />
        <Footer />
      </div>
    );
  }
}

Upvotes: 0

user11869519
user11869519

Reputation:

The easiest way for this is like this:

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        {page === 1 && <Products />}
        {page === 2 && <Contact />}
        {page !== 1 && page !== 2 &&
          <Landing />
        }
        <Footer />
      </div>
    );
  }
}

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30360

Another way to approach this would be:

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        { (page === 1) && <Products /> }
        { (page === 2) && <Contact /> }
        { (page !== 1 && page !== 2 ) && <Landing /> }
        <Footer />
      </div>
    );
  }

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20755

You should use conditional rendering like,

{this.state.page === 1 ? <Products /> : this.state.page === 2 ? <Contact /> : <Landing />}

Upvotes: 0

Jee Mok
Jee Mok

Reputation: 6556

Doesn't matter with the bracket, you can try this:

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent() {
    if (this.state.page === 1) {
      return <Products />;
    } else if(this.state.page === 2) {
      return <Contact />;
    } else {
      return <Landing />;
    }
  }

  render() {
    return (
      <div>
        <NavBar />
        {this.renderContent()}
        <Footer />
      </div>
    );
  }
}

Upvotes: 2

Related Questions