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.

Akash Salunkhe · Accepted Answer · 2018-12-12 12:21:21Z

5

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>);

answered Dec 12, 2018 at 12:21

Akash Salunkhe

3,0053 gold badges18 silver badges34 bronze badges

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

Comments

Just code · Accepted Answer · 2018-12-12 12:17:23Z

4

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

answered Dec 12, 2018 at 12:17

Just code

13.8k10 gold badges54 silver badges94 bronze badges

Comments

HydraHatRack · Accepted Answer · 2019-05-16 19:03:47Z

1

When you don't have a component to render if the prop value is false, I would use conditional rendering with the && operator instead of an inline if statement.

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>
);

Demo

edited May 16, 2019 at 19:03

answered May 16, 2019 at 18:31

HydraHatRack

1,3002 gold badges17 silver badges21 bronze badges

Collectives™ on Stack Overflow

React Passing Boolean value to component

Here is the code:

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is the code:

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related