Conditional image src render react

user_11336281 0
Viewed 6480

I am building a resusable react component to display some custom message with either warning icon or success Icon.

I will pass the the warning or success prop down so as when a user wants to use the component he either sends warning or success.

this is the code so far 

<img
        style={{ width: '48px', height: '48px', position: 'absolute' }}
        src={warningIcon}
      ></img>

how can i conditionally either put {warningIcon} or {successIcon} when i do create the prop and send down to the child component?

reactjs
2 Answers

Pass a boolean prop for success/warning and use a ternary operator to conditionally set the src attribute.

Something like:

const Img = ({ success }) => (
  <img
    style={{ width: '48px', height: '48px', position: 'absolute' }}
    src={success ? successIcon  : warningIcon}
  />
);
user_86908570

Use a ternari in the source:

   const [ stateImage, setStateImage ] =useState(false);

      src={stateImage ? 'one image' : 'another image'}
user_94434040
Related