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:
- mount the tooltip component with opacity 0
- animate opacity to 1
- after user interaction animate opacity back to 0
- 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?
Source: stackoverflow.com
Related Query
- How can show and hide react components using hooks
- Can I update and hide a component's props in React.js?
- React memo components and re-render when passing function as props
- HOC's and Render Props With Functional Components in React 16
- How can React useEffect watch and update state?
- In React componentDidUpdate, can props and state change at the same time?
- how to hide and show loading spinner - Activity Indicator react native, managing props and state
- React Native: Passing props between components and componentWillMount() method
- Spreading Props TypeScript with React and Styled Components
- How React Testing Library can assert children props and Redux store updates?
- In how many ways we can pass props to all child components in react
- Toggle between two components /buttons using react toggle hook {Show one component and Hide another}
- Can I safely use both the "to" and "onClick" props on a React Router Link?
- How to update parent state and child components props at once (at the same time)
- router props and custom props with typescript react router dom for functional components
- How can I update state in Redux - moving todo up and down - React
- Can two React distinct and mounted components communicate with each other using props?
- How to test for types on react components and props
- hide and show external components in react
- Update parent state based on props and onClick from child in React
- How can I update every React components using a context without provider?
- Weather App React taking three clicks to update state and pass props
- How can I pass Apollo data and React Router 4 url params to my components
- Is there a reason I have to export React components as JSX or can I export them as objects that contain the JSX and other things?
- Hide and Show Looped Components in React
- How to show and hide components in React to implement a multiple steps form?
- How can I create a counter as components to use multiple times and create one button to reset all the counter in React JS?
- How can I only allow certain components to scroll and keep certain React components fixed?
- React - How can i extract values from a form and update my state?
- How can I merge state and props to control visibility of alert in React
More Query from same tag
- How to consecutively order and re-order array of numbers allowing for duplicate values
- change the styling depending on a prop value material ui datepicker conditiona css
- Call two different action types from one redux-saga
- How to write unit test redux connected components in next.js app with Jest end Enzyme
- Calling the props from within the class
- converting $.Deferred() to react
- Converting class component with state to functional component with hooks
- Meteor Reactivity Using a Collection and SubCollection (e.g. Reactive Joins)
- Add Babel to Typescript React app
- i try to push a value inside an object and its always show undefined everytime i switch to another input tag
- When to use React.PropsWithChildren
- Why is console.log logging twice in react js?
- setting a single property using setState for an object in reactJS
- Group array with a given id in javascript
- React Hooks Async Best Practice
- Jest testing redux connected component gives error " please ensure the component is wrapped in a <Provider>"
- How to build React app with Babel for Internet Explorer 11?
- How to test button click on jest/enzyme without props
- The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type"
- How to stop the for loop inside useEffect in react js?
- Socket.emit is not working under socket.on in the server side
- What's the proper way to use Firebase Authentication along with Firestore?
- useContext value changes on rerenders
- Flow type - index signature declaring the expected key / value type is missing in property touches of unknown type
- "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."
- Webpack with babel-loader not able to parse react function component
- React Router: How to stop redirecting until API returns a response?
- How can I force a component to re-render with hooks in React?
- CSS to React components
- How to filter nested object property to update a document in Express and MongoDB?