score:3
Accepted answer
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}
/>
);
score:1
use a ternari in the source:
const [ stateimage, setstateimage ] =usestate(false);
src={stateimage ? 'one image' : 'another image'}
Source: stackoverflow.com
Related Query
- Conditional image src render react
- React onLoad event on image tag is not getting called when using conditional render
- render default src img if there is no image data fetched from database in react js
- How to give Image src dynamically in react js?
- React conditional render pattern
- `display: none` vs conditional render in React
- how to change image src using props with styled component and react
- React returns image src as object
- React Conditional Render and Navbar
- React passing import name as prop and adding to image src
- React set focus on input[type="number"] with conditional render
- React : how to load image outside src and public folders
- React hooks conditional render
- React 16.4 Conditional Render Based on Promise
- How to Read image data from API and render in React Component
- React set image src to a dynamic path
- How to use Refs to change image src in React js
- render desktop image as background for mobile react JSX
- React conditional render based on state
- How to render conditional HTML elements in React
- How To Conditional Render Data From 2 Data Sources Using React
- React Material UI conditional render table cell color
- Render Component if image src is valid
- How to avoid re-renders in React when using conditional Render and children node prop
- React - Using Conditional Rendering with window.location.href to change Background image
- React Hook Conditional Render
- How to render a number of image-elements with different src in react
- Conditional rendering and image path in React JS
- variable name of src parameter of image in React
- How to render default image before rendering the actual image in react js?
More Query from same tag
- How to create a loader component in Reactjs
- How to submit multipart/form-data from react to express?
- My React App never loads in localhost:3000 its just always spinning (Think React-Router-Dom is the issue)
- Jest Enzyme - Code Coverage for a callback function from third party Library
- how to submit form this Onchange? reactjs
- Using fetch api to post in react
- Simple react form validation with yup
- Change underline Material UI Autocomplete animation
- how to load a different component on click
- How to call State from Class component with combined String?
- React router with lazy and Suspense always falls back on wildcard route on page refresh
- Spread operator with React Props in Typescript (error: ...could be instantiated with a different subtype of constraint {})
- React Router Dom v6 - element with parameters drives me to functions are not valid as a react child
- How to execute a function after a group components did mount in reactjs?
- Manipulating SASS variable in React Component
- webpack: custom style is missing after production build
- What are refs in React?
- How to use onDoubleClick on MUI TextField?
- How i draw a route with react-google-maps component?
- Why my this.state is null?
- map over a array based on prop name, ReactJS
- Using styled-components
- Trigger focus() on NavLink in react
- Next.JS "Rendered more hooks than during the previous render"
- Changing state object on reducer
- What is the point of useEffect() if you don't specify a dependancy
- react router and express GET conflict
- Issue with materialize-css and Webpack, module with an equal name when case is ignored, JQuery
- React Context API and avoiding re-renders
- How to render data horizontally in table ( react )?