score:-1

there are a number of way to conditionally render a component in react.

i have provided a few examples of inline conditionals below:

function component = () => {
    const conditiona = true;
    const conditionb = false;
    return (
        <div>
            {
                // conditional render based off a truthy condition.
                conditiona && (
                    <div>
                        i will be rendered will conditiona is true.
                    </div>
                )
            }
            {
                // conditional render based off a truthy condition.
                conditionb && (
                    <div>
                        i will be rendered will conditionb is true.
                    </div>
                )
            }
            {
                // conditional if / else using a ternary.
                conditiona ?
                    <div>
                        i will be rendered will conditiona is true.
                    </div> :
                    <div>
                        i will be rendered will conditiona is false.
                    </div>
            }
        </div>
    )
}

score:-1

in componentwillreceiveprops() -- false case, you can use settimeout().

    else{
            timer = settimeout(() => this.setstate({visible: false});, 3000)
}

but this way you will need tow properties in the state object. one for fade-out class and another for ^^ removing the element (which will have timeout).

score:0

you can try using &&, for example this way bool && component

in your case so:

render() {

  return ( 
    {this.state.visible && <div classname = "text" > </div>}
  );

}

or something like that

score:0

i'm splitting your problem in these phases:

  1. mount the tooltip component with opacity 0
  2. animate opacity to 1
  3. after user interaction animate opacity back to 0
  4. unmount tooltip component

since you want to mount / unmount the component and play some css transitions at the same time you need to have a component in the mmiddle that monitors the phases of the animations before unmounting the tooltip (mounting is not an issue). i was facing a similar problem and my solution was with this library: framer-motion

i had to create this component to manage the animation state and the mount state of the components inside:

import { animatepresence, motion } from "framer-motion";
import react from "react";

const opacityanimation = ({
  classname, // optional, in case you need additional classnames
  children,
  duration = 0.3, // duration in seconds
  show // this prop will determine if the component is hidden or shown
}) => (
  <animatepresence>
    {show && (
      <motion.div
        style={{ overflow: "hidden", opacity: 0 }} //initial style
        animate={{ opacity: 1 }} // when mounted this style property will be animated
        transition={{ duration }}
        classname={classname}
        exit={{ opacity: 0 }} // this style will be animated when the component is unmounted
      >
        {children}
      </motion.div>
    )}
  </animatepresence>
);

export default opacityanimation;

for working example of how to use this component check here

score:0

thanks to ujjaval shah for the tip about timer. i found a solution.

class tooltip extends component {
  constructor(props) {
    super(props);
    this.state = {visible: false, fadein: false};
  }

  componentwillreceiveprops(newprops) {
      if (newprops.status === true) {
      this.timer1 = settimeout(() => this.setstate({fadein: true}), 100);
      this.timer2 = settimeout(() => this.setstate({visible: true}), 50);
    } else {
      this.timer1 = settimeout(() => this.setstate({fadein: false}), 100);
      this.timer2 = settimeout(() => this.setstate({visible: false}), 350);
    }
  } 

  componentwillunmount() {
  this.timer1 = null;
  this.timer2 = null;
  }  

  render() {

    return (
      <div>
      {this.state.visible && (
      <div classname={"fade" + (this.state.fadein ? ' in' : '') + " tooltip tooltip-danger"}>
      <div classname="text">{this.props.text}</div>
      </div>
      )}
      </div>
    );

  }
}

this works, but i'm not sure if this is the correct solution. maybe eating more thoughts?


Related Query

More Query from same tag