앱에서 여러 구성 요소로 React 양식 상태를 전달하는 방법 (기능적)

몇 가지 질문을 설명하는 예제 기능 구성 요소를 작성했습니다. 나는 이것을 집에서 썼고 메모장 ++ 만 가지고 있었으므로 붙여 넣으면 컴파일되지 않을 수 있습니다. 의견은 귀하의 질문을 설명합니다

import React from 'react';
import Create_budget_page from './Create_budget_page.js';


const BudgetPage = props => {

    // State 1: assigning one value to the state.
    // State 2: assinging a list to the state.
    // State 3: assinging a object to the state.
    const [simple_state, set_simple_state] = useState(false);
    const [list_state, set_list_state] = useState(["Hello","World","!"]);
    const [object_state, set_object_state] = useState(
        {
            curmenu: "human_bios",
            height: "196cm", 
            weight: "174lbs", 
            eye_colour: "blue", 
            hair_colour: "dirty_blonde"
        }
    );
    // there are several possiblities, here's one with a list of objects
    const [list_objects, set_list_objects] = useState(
        [
            {count: 69, wasClicked: false},
            {count: 420, wasClicked: true},
            // endless possibilities, the tricky part is properly correctly updating your states deep in the list
            {integers: [1,5,2,3], keys: {isAlive: false, cur_menu: "config_menu"}}
        ]
    );

    // this function updates the state that stores an object
    // arguments:
    //      new_values_object: the programmer passes in a object to the function with the values they want to update
    //      an example of calling this function in a child functional component:
    //          props.update_object_state({height: "165cm", weight: "143lbs", hair_colour: "black"});
    function update_object_state(new_values_object){
        set_object_state(prevState => {
            const new_obj = prevState;
            // loop through object keys and update the new_obj with the object passed in as a argument
            for (var key in new_values_object){
                new_obj[key] = new_values_object[key];
            }
            // returning the new_object will update the object_state
            return new_obj;
        })
    }



    // conditionally render based on state
    
    switch(object_state["curmenu"]){
        case "home_page":
             return (
                // pass in 
                // all props, 1 prop, state
                <Create_budget_page  {...props}  parent_id={prop.parent_id} simple_state={simple_state} list_objects={list_objects}/>
             ) ;
             break;
        // pass in function
        case "human_bios":
            return (
                <div className="error_page" onClick={() => {props.update_parent_state({error_occured: true})}}>This is an Error Page, click me to report diagnostics</div>
            );
        break;
        // if none of cases are met default code executes
        default:
            // renders nothing 
            return null;
    }        
}