javascript - Change style with Timeout in React function

Question

I can't figure out why React is not updating the style on the Div as it's updating the style opacity with a timeout event.

import React from 'react'

function PortItem(props){

  let style = {
      opacity: 0
  };

  setTimeout(function(){style = {opacity: 1};},3000);
  
  return(
    <div className="portItem" style={style} onClick={()=>props.click(props.pitem.id)}>
      <img src={props.pitem.src} alt={props.pitem.title}></img>
    </div>
  )
}

export default PortItem

question from:https://stackoverflow.com/questions/65936910/change-style-with-timeout-in-react-function

Answer 1

import React, { useState, useEffect } from "react";

function PortItem(props) {
  const [style, setStyle] = useState({ opacity: 0 });

  useEffect(() => {
    setTimeout(function () {
      setStyle({ opacity: 1 });
    }, 3000);
  }, []);

  return (
    <div
      className="portItem"
      style={style}
      onClick={() => props.click(props.pitem.id)}
    >
      <img src={props.pitem.src} alt={props.pitem.title}></img>
    </div>
  );
}

export default PortItem;