Gatsby conditional rendering of a component

Question

I have a template like this:

const Template = ({ data }) => {
  const { id } = data.Page
  const postNode = data.Page

  return (
    <Layout>
       // conditional logic here
       // if {id} is 40 output <AdditionalContent />
    </Layout>
  )
}

I want to know if it is possible to check the id to see if it is 40, then output <AdditionalContent> component.

score 6 · Answer 1 · answered Jan 14 '20 at 03:41

6

You can define like this

const Template = ({ data }) => {
  const { id } = data.Page
  const postNode = data.Page

  return (
    <Layout>
      {id===40 && <AdditionalContent />}
    </Layout>
  )
}

answered Jan 14 '20 at 03:41

akhtarvahid

9,445
2
26
29

this worked :) what does `&&` mean in here? is there another way to do conditional renderings as well? – Rain Man Jan 14 '20 at 03:45
@RainMan it is similar to if condition only not if else condition... so if id matches then only render that component. – akhtarvahid Jan 14 '20 at 06:01
@RainMan if answer is helpful for you please accept it – akhtarvahid Jan 14 '20 at 06:02

Gatsby conditional rendering of a component

1 Answers1