How to generate data for the child component?

Here is the parent code:

import {Col,Container,Row} from 'react-bootstrap';
import {useEffect,useState} from "react";
import AppConfig from '../../utils/AppConfig';
import BB from './BB';
import React from "react";
import Roster from '../../utils/Roster';
import MonthPicker from '../monthPicker/MonthPicker';
export default function AA(){
    const[rosterMonth,setRosterMonth]=useState(new Date());
    const[rosterTableData,setRosterTableData]=useState({});
    let monthPickerMinDate=JSON.parse(AppConfig.MIN_DATE);
    monthPickerMinDate=new Date(monthPickerMinDate.year,monthPickerMinDate.month-1,monthPickerMinDate.date);
    useEffect(()=>{
        const getData = async () => {
            let roster = new Roster();
            let rosterData = await roster.get(rosterMonth.getFullYear(),rosterMonth.getMonth()+1);
            let rosterParam = await roster.getRosterParam();
            setRosterTableData(
               {
                "rosterData":rosterData,
                "rosterParam":rosterParam
               }
            )
        }
        getData();    
    },[rosterMonth]);
    let updateMonth=(year,month)=>{
        //console.log("updateMonth="+year+","+month);
        let newDate=new Date();
        newDate.setFullYear(year);
        newDate.setMonth(month);
        setRosterMonth(newDate);
    }
    return(
        <div className="App p-1">
            <Container fluid={true} className="tableContainer">
                <Row>
                    <Col className="font-weight-bold text-center tableCaption" md={12} lg={12} sm={12} xl={12} xs={12}>
                        <u>Roster</u>
                    </Col>
                </Row>
                <Row>
                    <Col md={12} lg={12} sm={12} xl={12} xs={12}>
                        <MonthPicker 
                            minDate={monthPickerMinDate}
                            onSelect={updateMonth} />                        
                    </Col>
                </Row>
                <Row>
                    <Col className="d-flex justify-content-center p-0" md={12} lg={12} sm={12} xl={12} xs={12}>
                        <BB rosterTableData={rosterTableData}/>
                    </Col>
                </Row>                  
            </Container>        
        </div>
    )
}

Here is the child code:

export default function BB(props){
    console.log(props);
    return(<div></div>);
}

The expected result is that:

1. When the user picks a month from the MonthPicker, the parent component submit the select month and year to server.

2. Get the result from the server and then send the result to the child component.

The actual result is that the child components show its props twice(both the parent initial mount and update mount), that may be caused by 2 state variables exist.

However, I don’t know how to implement the function without using 2 state variables.

Is there any more simple solution?

Answer

If it’s really an issue, I’d just use conditional rendering – have rosterTableData be empty initially, and check if it’s empty before rendering the BB:

const[rosterTableData,setRosterTableData]=useState();

<Col className="d-flex justify-content-center p-0" md={12} lg={12} sm={12} xl={12} xs={12}>
    {rosterTableData && <BB rosterTableData={rosterTableData}/>}
</Col>