CODEWITHSUNDEEP
javascriptreactjsreact-hooksuse-state
VHaarish
VHaarish

Reputation: 81

useState to update an object property

I am new to React. I have a functional component that is used to render am image and some properties of an image passed as props to the component. I would like to update the image source when there is an error rendering the image. I would also like to update the state property of the parent component and pass it back to the parent. I am not sure how to achieve the same. I have been struggling for so long to achieve this. Please can someone help me solve this issue. Many thanks in advance.

Parent Component:

import React, {
  useState
} from 'react';
import PropTypes from 'prop-types';
import ImageRenderer from './ImageRenderer';
import VideoRenderer from './VideoRenderer';

const getComponent = {
  'image': ImageRenderer,
  'video': VideoRenderer
}

const AssetRenderer = (props) => {
    console.log('props in asset ren:', props);
    const [assetInfo, setAssetInfo] = useState(props);
    console.log('assetInfo in parent:', assetInfo);
    const isPublished = assetInfo.assetInfo.isAssetPublished;
    let source = assetInfo.assetInfo.assetUrl;
    const PreviewComponent = getComponent[assetInfo.assetInfo.type];
    return ( < div > {
        isPublished && source && < PreviewComponent assetInfo = {assetInfo} setAssetInfo = { setAssetInfo } />} </div>
      );
    }

    AssetRenderer.propTypes = {
      assetInfo: PropTypes.object.isRequired
    };
    export default AssetRenderer;

Child Component:

import React from 'react';
import PropTypes from 'prop-types';
import {
  Subheading
} from '@contentful/forma-36-react-components';

const ImageRenderer = props => {
  console.log('inside image renderer', props);
  return ( <
    div id = "asset-img" >
    <
    Subheading > Image preview: < /Subheading> <
    p > Name: {
      props.assetInfo.assetInfo.name
    } < /p> <
    p > Type: {
      props.assetInfo.assetInfo.type
    } < /p>  <
    p > Url: {
      props.assetInfo.assetUrl
    } < /p>  <
    img src = {
      props.assetInfo.assetInfo.assetUrl
    }
    alt = "name"
    onError = {
      e => {
        props.setAssetInfo(assetInfo => {
          return { ...props.assetInfo.assetInfo,
            assetUrl: 'https://example.com/404-placeholder.jpg',
            isAssetPublished: false
          } //would like to update the asset url to 404 and also set isAssetPublished to false and pass it back to parent to update parent state 
        });
      }
    }
    /> <
    /div> 
  )
}
ImageRenderer.propTypes = {
  assetInfo: PropTypes.object.isRequired
};
export default ImageRenderer;

Upvotes: 2

Views: 305

Answers (2)

akshay karande
akshay karande

Reputation: 158

If the purpose is to handle image error only, then you can achieve it without re-rendering a component:

<img src={assetInfo.assetInfo.assetUrl} alt="name"
     onError={e => {
          e.target.src = 'https://example.com/404-placeholder.jpg';
     }}
/>

Upvotes: 1

ilkerkaran
ilkerkaran

Reputation: 4364

Instead of using new state in ImageRenderer component, you can just pass setState of Parent via props like this;

parent component

import React, { useStae } from 'react'

const parentCompoennt = props => {
  const [assetInfo,setAssetInfo] = useState();
  return (
    <ImageRenderer assetInfo={assetInfo} setAssetInfo={setAssetInfo} />
  );
}

imageRenderer component

const ImageRenderer =  props =>  {


    return(
        <div id="asset-img">
             <p> Name: {props.assetInfo.assetInfo.name} </p>
             <p> Type: {props.assetInfo.assetInfo.type} </p> 
             <p> Url: {props.assetInfo.assetInfo.assetUrl} </p> 
            <img src={props.assetInfo.assetInfo.assetUrl}  alt="name"  onError={e => {
                    props.setAssetInfo(assetInfo => {
                        return { ...props.assetInfo, assetUrl: 'https://example.com/404-placeholder.jpg' } //would like to update the asset url to 404 and also set isAssetPublished to false and pass it back to parent to update parent state 
                    });
            }}/>
        </div> 
    )
}

Upvotes: 3

Related Questions