دریافت متغیر از function

اینکار نه درسته و پیشنهاد میشه ، کدی که منظورتون هست رو بفرستید بهتون بگیم

@hesammousavi

function ByPanel() {
  function Blog(props) {
    const { className } = props;
    const test = "hello";
    const [modal, setModal] = useState(false);
    const [content, setContent] = useState("");
    const [titr, setTitr] = useState("");
    const [slider, setSlider] = useState(<ChartSlider />);
    const [api, setApi] = useState(data);
    const [tableapi, setTableapi] = useState();
    const toggle = () => setModal(!modal);
    return (
      <Card>
        <CardBody>
          <Row justify="center" style={{ textAlign: "-webkit-center" }}>
            {props.posts.map((post) => (
              <div>
                <div
                  className="by-solar-panel"
                  key={post.key}
                  onClick={() => {
                    for (var i = 0; i <= data.length; i++) {
                      if (post.key === i) {
                        setContent(post.content);
                        setTitr(post.info.number);
                        setTableapi(post.table);
                      }
                    }
                    console.log(content);
                    // setContent(post.key)
                    toggle();
                  }}
                ></div>
                <label>{post.info.number}</label>
              </div>
            ))}

            <Col>
              <Modal isOpen={modal} toggle={toggle} className={className}>
                <ModalHeader toggle={toggle}>مشخصات پنل :{titr}</ModalHeader>
                <ModalBody>
                  {content}
                  <Tabs defaultActiveKey="1" type="card">
                    <TabPane tab="صفحه 1" key="1">
                      {content}
                      <FinallyChart2 />
                    </TabPane>
                    <TabPane tab="صفحه 2" key="2">
                      {slider}
                    </TabPane>
                    <TabPane tab="صفحه 3" key="3">
                      <div>
                        <strong style={{ color: "red" }}>توجه:</strong>
                        <Label color="danger">
                          جهت مرتب کردن هر ستون کافی است روی عنوان هر ستون کلیک
                          نمایید.
                        </Label>
                      </div>
                      <MDBDataTable
                        striped
                        bordered
                        small
                        hover
                        searching={false}
                        order={["salary", "asc"]}
                        data={tableapi}
                        paging={false}
                      />
                    </TabPane>
                  </Tabs>
                </ModalBody>
                <ModalFooter></ModalFooter>
              </Modal>
            </Col>
          </Row>
        </CardBody>
      </Card>
    );

  }
  function TreeList() {
    const [valueT, setValueT] = useState("0-0-1");
    const [visibile, setVisibile] = useState(false);

    function onChange(value) {
      console.log("onChange ", value);
      setValueT(value);
    }
    const tProps = {
      treeData,
      value: valueT,
      onChange: onChange,
      treeCheckable: true,
      showCheckedStrategy: SHOW_PARENT,
      placeholder: "لطفا انتخاب کنید",
      style: {
        width: "100%",
      },
    };
    function showDrawer() {
      setVisibile(true);
    }

    function onClose() {
      setVisibile(false);
    }

    return (
      <div style={{ padding: "2px" }}>
        <Button type="primary" onClick={showDrawer}>
          Open
        </Button>
        <Drawer
          title="Basic Drawer"
          placement="right"
          closable={false}
          onClose={onClose}
          visible={visibile}
          placement="left"
        >
          <div style={{ fontFamily: "B Roya", fontSize: "small" }}>
            <h1>بخش انتخاب</h1>
            <p className="text-muted">
              با استفاده از منوی کادر زیر پنل هایی را که قصد مشاهده اطلاعات آن
              را دارید انتخاب کنید.
            </p>
          </div>
          <TreeSelect {...tProps} />
        </Drawer>
      </div>
    );
  }

  return (
    <div>
      <Blog posts={data} />
      <TreeList />
    </div>
  );
}

ببینید توی کد بالا بصورت فانکشنال کامپوننت اومدم گفتم که بره از فایل json داده ها رو بگیره و به تعداد المان های توی داده ها بیاد یه چیزی رو بسازه. می خوام یک treelist اضافه کنم که node هاش در واقع میشه همون شماره هر کدوم از المان هایی که توی دیتا هست.
مثل کد بالا مثلا node ها بشه : post.info.number
از طرفی چون post رو توی فانکشن Blog تعریف کردم و همین طور متدهای کلیک و ... هم توی اون تعریف شده به متغیر هاش برای فانکشن treelist ام احتیاج دارم.
از طرفی اگر treelist رو توی فانکشن blog بنویسم چون از map استفاده می کنم اونوقت میاد به تعداد المان های توی داده هام treelist میسازه.
ممنون میشم اگر کمکم کنید.