How to Re-render a specific Component in react when a Property changes

Question

I have an App in which I want for a specific button to rerender the Chart component. This chart component has an animation I want to fire when my button is called

import './App.css';
import Charts from './Charts/Charts'
import LeftSideBar from './LeftSideBar/LeftSideBar'
import RightSideBar from './RightSideBar/RightSideBar'
import {useState} from 'react'
import DateContext from './context/DateContext'

function App() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  const [result,setResult] = useState(16)
  if (result > 41 ){
    setResult(0)
  }
  return (
    <div className="App">

        <DateContext.Provider value={{startDate:startDate,endDate:endDate,result:result}}>
                    <LeftSideBar />
                    <Charts/>
                    <div></div>
                    <div></div>
                    <RightSideBar 
                    setStartDate={setStartDate} 
                    setEndDate={setEndDate} 
                    setResult={setResult}
                    />
        </DateContext.Provider>
    </div>
  )
}

export default App;

This is my DatePicker in which my logic resides, I want this button to rerender my Chart component when called

import React, { useContext } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import '../style.css'
import DateContext from "../context/DateContext";

const Datepicker = (props) => {
    const {setStartDate, setEndDate, setResult} = props
    const {startDate,endDate} = useContext(DateContext)
    const handleCalculation = () =>{
        let substractedTime = endDate.getTime() - startDate.getTime()
        let substractedDays = substractedTime/ (1000 * 3600 * 24)
        setResult(Math.floor(substractedDays/7))
    }
    return (
    <>
    <h6>DATE DES DERNIERES REGLES</h6>
       <div className="picker1"><DatePicker selected={startDate} onChange={date => setStartDate(date)} /></div>
    <h6>DATE DE LA CONSULTATION</h6>
      <div className="picker2"><DatePicker selected={endDate} onChange={date => setEndDate(date)} /> 
      </div>
      <button className='btn submit' onClick={()=>{handleCalculation()}}>Calculer</button>
    </>
    );
  };

export default Datepicker

Answer 1

First of all, in "React" you should use a conditional setState inside "useEffect" . So, as per your code you should replace this code:

if (result > 41 ){
  setResult(0)
}

With:

useEffect(() => {
  if (result > 41 ){
    setResult(0)
  }
},[result])

And in case of your rerendering issue, As per your given code, the "handleCalculation()" function is called when the button is clicked. And the "handleCalculation()" function calls "setResult()" . So, according to the functionality of React , your "App" component should re-render. So, in that case there is nothing wrong in your code. There might be some issue in the "Charts" component.

You may also check whether the re-render is happening or not using a "console.log" just before the "return()" statement. Like:

function App() {
  ...your code...

  console.log("Rendered");

  return (
    ...your code...
  );
}