title: Convert class component to hooks
body: <p>I am attempting to convert the following code snippet to hooks. What I have converted so far, doesn't render output as the original. Below is the default code written as class components-</p>
  <pre><code>  class Area extends React.PureComponent {
    state = {
      data: [],
      tooltipX: null,
      tooltipY: null,
      tooltipIndex: null,
    };
  
    componentDidMount() {
      this.reorderData();
    }
  
    reorderData = () =&gt; {
      const reorderedData = DATA.sort((a, b) =&gt; {
        // 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 }) =&gt;
        data.map((item, index) =&gt; (
          &lt;Circle
            key={index}
            cx={x(moment(item.date))}
            cy={y(item.score)}
            r={6}
            stroke={color}
            fill=&quot;white&quot;
            onPress={() =&gt;
              this.setState({
                tooltipX: moment(item.date),
                tooltipY: item.score,
                tooltipIndex: index,
              })
            }
          /&gt;
        ));
  
      return (
        &lt;SafeAreaView style={{ flex: 1 }}&gt;
          &lt;View style={styles.container}&gt;
            {data.length !== 0 ? (
              &lt;AreaChart
                style={{ height: '70%' }}
                data={data}
                yAccessor={({ item }) =&gt; item.score}
                xAccessor={({ item }) =&gt; moment(item.date)}
                contentInset={contentInset}
                svg={{ fill: '#003F5A' }}
                numberOfTicks={10}
                yMin={0}
                yMax={10}
              &gt;
                &lt;Grid svg={{ stroke: 'rgba(151, 151, 151, 0.09)' }} belowChart={false} /&gt;
                &lt;ChartPoints color=&quot;#003F5A&quot; /&gt;
                &lt;Tooltip
                  tooltipX={tooltipX}
                  tooltipY={tooltipY}
                  color=&quot;#003F5A&quot;
                  index={tooltipIndex}
                  dataLength={data.length}
                /&gt;
              &lt;/AreaChart&gt;
            ) : (
              &lt;View
                style={{
                  height: '50%',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              &gt;
                &lt;Text
                  style={{
                    fontSize: 18,
                    color: '#ccc',
                  }}
                &gt;
                  There are no responses for this month.
                &lt;/Text&gt;
              &lt;/View&gt;
            )}
            &lt;Text style={styles.heading}&gt;Tooltip Area Chart&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
      );
    }
  } 
  </code></pre>
  <p>Below's the code I converted. I feel the below code is not rendering the tooltip because of how the state is written out in hooks. The tooltip isn't showing up upon click.</p>
  <pre><code>const Area = () =&gt; {
  const [ data, setData ] = useState([]);
  const [ tooltipX, setTooltipX ] = useState(null);
  const [ tooltipY, setTooltipY ] = useState(null);
  const [ tooltipIndex, setTooltipIndex ] = useState(null);
  
  useEffect(() =&gt; reorderData(),[]);
  
  const reorderData = () =&gt; {
      const reorderedData = DATA.sort((a, b) =&gt; {
        // 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 }) =&gt;
        data.map((item, index) =&gt; (
          &lt;Circle
            key={index}
            cx={x(moment(item.date))}
            cy={y(item.score)}
            r={6}
            stroke={color}
            fill=&quot;white&quot;
            onPress={() =&gt;
              this.setState({
                tooltipX: moment(item.date),
                tooltipY: item.score,
                tooltipIndex: index,
              })
            }
          /&gt;
        ));
  
      return (
        &lt;SafeAreaView style={{ flex: 1 }}&gt;
          &lt;View style={styles.container}&gt;
            {data.length !== 0 ? (
              &lt;AreaChart
                style={{ height: '70%' }}
                data={data}
                yAccessor={({ item }) =&gt; item.score}
                xAccessor={({ item }) =&gt; moment(item.date)}
                contentInset={contentInset}
                svg={{ fill: '#003F5A' }}
                numberOfTicks={10}
                yMin={0}
                yMax={10}
              &gt;
                &lt;Grid svg={{ stroke: 'rgba(151, 151, 151, 0.09)' }} belowChart={false} /&gt;
                &lt;ChartPoints color=&quot;#003F5A&quot; /&gt;
                &lt;Tooltip
                  tooltipX={tooltipX}
                  tooltipY={tooltipY}
                  color=&quot;#003F5A&quot;
                  index={tooltipIndex}
                  dataLength={data.length}
                /&gt;
              &lt;/AreaChart&gt;
            ) : (
              &lt;View
                style={{
                  height: '50%',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              &gt;
                &lt;Text
                  style={{
                    fontSize: 18,
                    color: '#ccc',
                  }}
                &gt;
                  There are no responses for this month.
                &lt;/Text&gt;
              &lt;/View&gt;
            )}
            &lt;Text style={styles.heading}&gt;Tooltip Area Chart&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
      );
    
  }  
  </code></pre>