how to hide a string on re-render in react

Question

I have a button inside a functional component which on click displays a string. I want to know how to hide that string when the component is re-rendered or there is any state change.

<button onClick = {() => props.getstring (props.state)} >Click </button>
{props.state.string}

So, when I click this button, the string is displayed but it stays on the screen when there is a state change. I want to hide it when any state value changes.

Answer 1

you can use react life-cycle methods to do that. As you need to get component update event you can use getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    // ...
}

Answer 2

You need a useEffect Hook (Added in React16.8) for this,

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

const [isHidden, setIsHidden] = useState(false);

useEffect(
  () => {
    setIsHidden(true);
  },
  [props.state],
);

//Now the setIsHidden will only be called when props.state changes.

and then you can hide string,

{!isHidden && props.state.string}