CODEWITHSUNDEEP
javascriptreactjs
Markus Hayner
Markus Hayner

Reputation: 2959

How can I change the value of let from a component prop?

I am trying to hide the the card once the time is equal with 0 but the timeLeft is never updated. Any idea what am I doing wrong in here?

<div style={{ flexDirection: "column", overflowY: "scroll" }}>
  {sorted.map((d, i) => {
    let timeLeft;
      return (
        <div key={i} className="card__container">
          <ProgressBar
            percentage={d.time * 10}
            timing={res => (timeLeft = res)}
          />
        </div>
      );
  })}
</div>

My ProgressBar looks like this

constructor(props) {
    super(props);
    this.state = {
      timeRemainingInSeconds: props.percentage
    };
  }
  componentDidMount() {
    timer = setInterval(() => {
      this.decrementTimeRemaining();
    }, 1000);
  }

  decrementTimeRemaining = () => {
    if (this.state.timeRemainingInSeconds > 0) {
      this.setState({
        timeRemainingInSeconds: this.state.timeRemainingInSeconds - 10
      });
    } else {
      clearInterval(timer);
      this.props.timing(0);
    }
  };
  render() {
    return (
      <div className="Progress_wrapper">
        <div
          className="Progress_filler"
          style={{ width: `${this.state.timeRemainingInSeconds / 2}%` }}
        />
      </div>
    );
  }
}

Upvotes: 1

Views: 58

Answers (2)

Felix
Felix

Reputation: 2691

I think the variable doesn't get updated, because your map function is kind of a functional component, which therefore is a render function. The variable is basically always reset if you make changes to your parent component.

You could create a real functional component by externalizing it and using a useState hook, kind of the following (I really don't know, but this could also work as definition inside your map function):

function CardContainer(props) {
    const [timeLeft, setTimeLeft] = useState(0); // @todo set initial state based on your own definition

      return (
        <div key={i} className="card__container">
          <ProgressBar
            percentage={d.time * 10}
            timing={res => setTimeLeft(res)}
          />
        </div>
      );
}

Upvotes: 1

iamfeek
iamfeek

Reputation: 81

It would be easier if you can reference the library that you are using for ProgressBar. If it is not from a library, reference the source code for it.

I see some issues with the timing prop here.

<ProgressBar
  percentage={d.time * 10}
  timing={res => (timeLeft = res)}
/>

My understanding of your props for ProgressBar

Timing

This should be a static value that the component would just display as a visual indicator. We have to take note of the required units for this prop.

Percentage

This should be a value from 0 to 100 that will decide how the progress bar will visually look like.

Your question: Hide the component when timing is zero(or perhaps when percentage is at 100?).

For this, we can deploy the strategy to manipulate the style of the div that is wrapping this component. 

<div style={{ flexDirection: "column", overflowY: "scroll" }}>
  {sorted.map((d, i) => {
    const percentage = d.time * 10; // this is taken from your own computation of percentage. I reckon that you need to divide by 100.
    let customStyle = {};
    if(percentage === 100){
      customStyle = {
        display: "none"
      }
    }

    return (
      <div key={i} className="card__container" style={customStyle}>
        <ProgressBar
          percentage={percentage}
          timing={res => (timeLeft = res)}
        />
      </div>
    );
  })}
</div>

Upvotes: 1

Related Questions