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

Anderpo · Accepted Answer · 2021-01-28 12:23:31Z

2

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;

answered Jan 28, 2021 at 12:23

Anderpo

1651 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fullstack · Accepted Answer · 2021-01-28 12:17:59Z

1

move the style to the state or a ref, so the component would rerender when it changes.

const [style, setStyle] = useState({ opacity: 0 });
setTimeout(function(){setStyle({ opacity: 1 })};},3000);

answered Jan 28, 2021 at 12:17

fullstack

8347 silver badges24 bronze badges

Collectives™ on Stack Overflow

Change style with Timeout in React function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related