Develop Reference

React Recharts: Design custom tooltip

I am trying to replace recharts default tooltip with custom tooltip.
The existing tooltip looks like this.
I wanted to replace the above default tooltip as
I made sandbox for the code.
Thanks

Very quick solution. You can alter it as you want
Create a custom tooltip class
export const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<div>
{payload.map((pld) => (
<div style={{ display: "inline-block", padding: 10 }}>
<div style={{ color: pld.fill }}>{pld.value}</div>
<div>{pld.dataKey}</div>
</div>
))}
</div>
</div>
);
}
return null;
};
And use it like this
<Tooltip content={<CustomTooltip />} cursor={{ fill: "transparent" }} />
demo

How can I show the card I bought Antd side by side?

import { categories } from './data/categories'
import { useState } from 'react'
import {Card} from 'antd' import './App.css';
import image1 from './assets/images/Resim.png';
const { Meta } = Card;
const CategoryCard = () => {
const [categoriesList, setCategoriesList] = useState(categories)
return (
<>
{categoriesList.map((categori ,key)=>(
<div className='flex-container '>
<div className='flex-div'>
<Card
style={{ width: 240 }}
cover={<img alt="example" src={image1} />}
>
<Meta title={categori.name} description= {categori.description}/>
</Card>
</div>
</div>
))}
</>
); }
export default CategoryCard
I want to align the cards in threes side by side, I tried to do it
using display-flex, but I couldn't, can you help? The css codes I wrote are above.

your code is confusing, anyway if you wanna align them side by side you just add display: flex to the parent element.
(naturally, children will be horizontally aligned when you add display flex to their parent, and if you want them to be aligned vertically just add flex-direction: column;)
.flex-div{
display: flex;
}

How to put one div onto another with transition?

I want to create something such that, depending on the state, a given div appears overlapping another div from the right side, here is my code:
const [loggedIn, setLoggedIn] = useState<boolean>(false);
const [hasConfirmedAccount, setHasConfirmedAccount] = useState<boolean>(false);
return (
<>
<div style={{ width: "100%" }}>
<div style={{ float: "left", width: "50%" }}>
<div
style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }}
></div>
</div>
<div id='notLoggedIn' style={{ float: "right", width: "50%" }}>
{!loggedIn && (
<div>
WHEN LOGGED IN === TRUE
</div>
)}
<div
style={
loggedIn && !hasConfirmedAccount
? { width: "100%", transition: "ease-in-out 5s" }
: { display: "none" }
}
>
<div id="notConfirmedAccount">WHENE LOGGED IN === TRUE AND hasConfirmedAccount === FALSE</div>
</div>
</div>
</div>
</>
);
The code works fine, when loggedIn === true and hasConfirmedAccount === false div with id = notConfirmedAccount has been displayed instead of div with id=notLoggedIn, but displaying this div does not work flowing, I want a slow leaving effect of the div on the right side that would overlap the previous div
can someone tell me what to do this?
thanks for any help!

install animate.css => $ npm install animate.css --save
animate.css
2.import "./animate.css" at top your component or project
3.just put the name of aniamte on className like this pattern in your div
<div className={style.forgot} className='animate__animated animate__fadeInDown'>
also you should control your showing div with state

Use React animation Add-Ons ReactTransitionGroup and ReactCSSTransitionGroup
The ReactTransitionGroup add-on component is a low-level API for animation, and ReactCSSTransitionGroup is an add-on component for easily implementing basic CSS animations and transitions.
https://reactjs.org/docs/animation.html

How to efficiently toggle classes with multiple HTML elements across multiple files

I am toggling an arrow image whenever my div is clicked. I am controlling the state of the click with
const [toggleArrow, setToggleArrow] = useState(false)
My div has an onClick function that controls the state and toggles the faq-subject-toggle-arrow class that adds an image
<div className={`faq-subject ${toggleArrow ? 'faq-subject-toggle-arrow' : ''}`} onClick={() => {
setToggleArrow(!toggleArrow)
}>
My problem is that I have 50 divs across multiple styles and don't want to make 50 states to toggle one image.
Is there a more efficient solution for this with less code?

I created something that does the same thing. I extracted your code and made a component. now the state lives inside the component and will not affect others.
live demo
component
import { useState } from "react";
export const Button = () => {
const [toggleArrow, setToggleArrow] = useState(false);
return (
<div
style={{ width: "50px", height: "50px", margin: "10px" }}
className={`faq-subject ${toggleArrow ? "faq-subject-toggle-arrow" : ""}`}
onClick={() => {
setToggleArrow(!toggleArrow);
}}
></div>
);
};
css file, I didn't have the same classes so I created mine.
.faq-subject {
background: blue;
}
.faq-subject-toggle-arrow {
background: orange;
}
now you can use it wherever you want for multiple times
import { Button } from "./button";
import "./styles.css";
export default function App() {
return (
<div className="App">
<Button />
<Button />
<Button />
<Button />
<Button />
</div>
);
}

React: delay in input changes

I have a rather big array of objects in the parent component's state. And when I pass them as props to children components (which don't have state, only props) I have a huge delay in typing (in children's components) when the input changes.
I have already read answers on similar questions ReactJS delay onChange while typing and advice to use shouldcomponentupdate reactjs : ShouldComponentUpdate for states .
But, unfortunately, I still didn't understand how to apply it in my example: https://codesandbox.io/s/react-example-8vlc2 . Parent component is index.js . So:
1) Should I use componentdidupdate or shouldcomponentupdate() in children's components (StoryList.tsx and StoriesScreenItem/StoriesScreenList) ?
2) Should I add state in children's component to use componentdidupdate or shouldcomponentupdate() ?
3) Why does the input delay happen in my example?
4) Or any other ideas how can I manage this problem?
Any help would be appreciated!

My suggestion would be to create a functional component for a story.
It could look something like this:
export const Story = props => {
const [story, setStory] = useState(props.story);
const handleChange = e => {
const updatedStory = {...story};
updatedStory.caption = e.target.value;
setStory(updatedStory);
};
return (
<div>
<div>
<div>
{story.previewUri ? (
<div>
<img
style={{
objectFit: "cover",
border: "4px solid #1ec1b6"
}}
width="110"
height="168"
src={story.previewUri || null}
alt={"Фото сториc"}
/>
</div>
) : (
<div
style={{
border: "4px solid #1ec1b6",
textAlign: "center",
fontSize: "14px"
}}
>
Link image
</div>
)}
<div>
<span>Story</span>
<div>
<div>
<span>Preview title</span>
</div>
<div>
<input
style={{ width: "100%" }}
maxLength={99}
value={story.caption}
onChange={e => handleChange(e)}
/>
</div>
</div>
</div>
</div>
<StoriesScreenList
screens={story.stories}
onChange={screens => props.changeScreen(screens, props.index)}
/>
</div>
</div>
);
};
export default Story;
Each of these would have their own state, so you would not have to update the entire array of stories each time a single story is changed.
Which is suspect is what creates the delay.
I Hope this is helpful.