How to display an image(as error) instead of error message

Question

const FALLBACK_IMAGE = "https://devprojectupload.s3.ap-south-1.amazonaws.com/32490.png";


const ModelComponent = (props) => {

  const [height, setHeight] = useState(window.innerHeight);
  const [width, setWidth] = useState(window.innerWidth);
  
  //API data 
  const [modelData, setModelData] = useState([]);
  
  //Error
  const [isError, setIsError] = useState("");

useEffect(() => { axios. get("https://51fgc922b7.execute-api.ap-south-1.amazonaws.com/dev/productpreview") .then((res) => { console.log(res.data.data) setModelData(res.data.data[0]) }) .catch((error)=> setIsError(()=>{ , error }) ) }, []);

Answer 1

Currently you're not returning anything in your setIsError function. You can return the error you receive from the catch or just set it to true

setIsError(()=>{
  return error;
  // return true;
})

In the return of your component you could do something like this, where you check if there is an error and if there is you display your img

return (
  ...
  {isError && <img src={FALLBACK_IMAGE} alt="error"/>}
  ...
);