useState to update an object property

Question

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 } />}


      );
    }

    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;

user_2630427 · Answer

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 component

const ImageRenderer =  props =>  {


    return(
        
              Name: {props.assetInfo.assetInfo.name} 
              Type: {props.assetInfo.assetInfo.type}  
              Url: {props.assetInfo.assetInfo.assetUrl}  
             {
                    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 
                    });
            }}/>
         
    )
}

user_10852222 · Answer

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

 {
          e.target.src = 'https://example.com/404-placeholder.jpg';
     }}
/>

useState to update an object property

2 Answers