How to display new data that came through props?

Question

React

There is a component that receives data from the store and puts it in props

function Details(props: any) {
  let details: any
  const routeParams: any = useParams();	

  useEffect(() => {
    details = props.victims.find((victim: any) => routeParams.pk == victim.pk)
    console.log(details)
  }, [props.victims])
  
  return(
    <>
      {
        details && Object.keys(details.fields).map((f: string, i: number) => f)
      }
    </>
  )
}

const mapStateToProps = (state: appStateType) => {
  return {
    victims: state.victimsReducer.victims,
  }
}

export default connect(mapStateToProps, {})(Details);

The problem is that it useEffectworks after return. But the data that I need to display is formed in useEffect. Therefore, the browser displays a blank screen (although the console shows that there is data).

Please help displaydetails.fields

Answer 1

UseEffect is not needed here. Replace it with useMemo or don't use any hooks at all, get the right value right away.