React Passing Boolean value to component

Question

I am trying to pass a Boolean value to my component so it can show an image depending on if it is true or false but I am not very sure how to proceed here.

Here is the code:

Passing Boolean value to component:

<SomeComponent showImage={false}/>

Trying to use it on component:

const TheImage = showImage => (

      <div align="center">
        {showImage ? (<img src={ImageIwant} alt="The image i want" width="80%" height="80%" />) : ''}
        <p>Here is the image</p>
      </div>); 

I am new to react an i am not sure why this doesn't work.

Answer 1

Change your show image component from

const TheImage = showImage => (

  <div align="center">
    {showImage ? (<img src="https://lcsc.academyofmine.com/wp-content/uploads/2017/06/Test-Logo.svg.png" alt="The image i want" width="80%" height="80%" />) : ''}
    <p>Here is the image</p>
  </div>);

to

const TheImage = prop => (

  <div align="center">
    {prop.showImage ? (<img src="https://lcsc.academyofmine.com/wp-content/uploads/2017/06/Test-Logo.svg.png" alt="The image i want" width="80%" height="80%" />) : ''}
    <p>Here is the image</p>
  </div>);

Because your component will have the prop as an object so if you want to access any property which is passed you need to use prop.yourpropertyname

Demo

Answer 2

Add curly braces to showImage to destruct it

const TheImage = { showImage } => (

      <div align="center">
        {showImage ? (<img src={ImageIwant} alt="The image i want" width="80%" height="80%" />) : ''}
        <p>Here is the image</p>
      </div>);