Not sure how I would convert this class component to hooks form. I tried to, but the app doesn't run the same. Here's the original code written as class components-
class Area extends React.PureComponent {
state = {
data: [],
tooltipX: null,
tooltipY: null,
tooltipIndex: null,
};
componentDidMount() {
this.reorderData();
}
reorderData = () => {
const reorderedData = DATA.sort((a, b) => {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(a.date) - new Date(b.date);
});
this.setState({
data: reorderedData,
});
};
render() {
const { data, tooltipX, tooltipY, tooltipIndex } = this.state;
const contentInset = { left: 10, right: 10, top: 10, bottom: 7 };
const ChartPoints = ({ x, y, color }) =>
data.map((item, index) => (
<Circle
key={index}
cx={x(moment(item.date))}
cy={y(item.score)}
r={6}
stroke={color}
fill="white"
onPress={() =>
this.setState({
tooltipX: moment(item.date),
tooltipY: item.score,
tooltipIndex: index,
})
}
/>
));
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
{data.length !== 0 ? (
<AreaChart
style={{ height: '70%' }}
data={data}
yAccessor={({ item }) => item.score}
xAccessor={({ item }) => moment(item.date)}
contentInset={contentInset}
svg={{ fill: '#003F5A' }}
numberOfTicks={10}
yMin={0}
yMax={10}
>
<Grid svg={{ stroke: 'rgba(151, 151, 151, 0.09)' }} belowChart={false} />
<ChartPoints color="#003F5A" />
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
color="#003F5A"
index={tooltipIndex}
dataLength={data.length}
/>
</AreaChart>
) : (
<View
style={{
height: '50%',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text
style={{
fontSize: 18,
color: '#ccc',
}}
>
There are no responses for this month.
</Text>
</View>
)}
<Text style={styles.heading}>Tooltip Area Chart</Text>
</View>
</SafeAreaView>
);
}
}
This code is being used to integrate tooltip in react native charts. I want to include this code with rest of the project code written in hooks form.
export default class myPureComponent extends React.PureComponent
is equal to:
export default React.memo(()=>{
return <View>//...</view>
},(prevProps, nextProps) => {
return prevProps.x === nextProps.x;
// the component will be updated only on `x` prop changes.
})
componentDidMount
is equal to:
React.useEffect(()=>reorderData(),[]);
Try to format your codes properly.
Add a [] in your use effects to it only render once.
useEffect(() => {
reorderData();
},[]); //add [] as a dependency, this renders useEffect only on mount.
Full codes
const Area = () => {
const [ data, setData ] = useState([]);
const [ tooltipX, setTooltipX ] = useState(null);
const [ tooltipY, setTooltipY ] = useState(null);
const [ tooltipIndex, setTooltipIndex ] = useState(null);
useEffect(() => reorderData(),[]);
const reorderData = () => {
const reorderedData = DATA.sort((a, b) => {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(a.date) - new Date(b.date);
});
setData(reorderedData);
};
const contentInset = { left: 10, right: 10, top: 10, bottom: 7 };
const ChartPoints = ({ x, y, color }) =>
data.map((item, index) => (
<Circle
key={index}
cx={x(moment(item.date))}
cy={y(item.score)}
r={6}
stroke={color}
fill="white"
onPress={() =>
this.setState({
tooltipX: moment(item.date),
tooltipY: item.score,
tooltipIndex: index,
})
}
/>
));
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
{data.length !== 0 ? (
<AreaChart
style={{ height: '70%' }}
data={data}
yAccessor={({ item }) => item.score}
xAccessor={({ item }) => moment(item.date)}
contentInset={contentInset}
svg={{ fill: '#003F5A' }}
numberOfTicks={10}
yMin={0}
yMax={10}
>
<Grid svg={{ stroke: 'rgba(151, 151, 151, 0.09)' }} belowChart={false} />
<ChartPoints color="#003F5A" />
<Tooltip
tooltipX={tooltipX}
tooltipY={tooltipY}
color="#003F5A"
index={tooltipIndex}
dataLength={data.length}
/>
</AreaChart>
) : (
<View
style={{
height: '50%',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text
style={{
fontSize: 18,
color: '#ccc',
}}
>
There are no responses for this month.
</Text>
</View>
)}
<Text style={styles.heading}>Tooltip Area Chart</Text>
</View>
</SafeAreaView>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.