import React from "react";
type Props = {
  children: string;
};
const PageTitle: React.FC<Props> = (props) => {
  console.log(props);
  return (
    <h3 style={{ fontWeight: 600 }} {...props}>
      {props.children}
    </h3>
  );
};

export default PageTitle;

import React from "react";
type Props = {
  children: string;
};
const PageTitle= ({children ,...props}:Props) => {
  console.log(props);
  return (
    <h3 style={{ fontWeight: 600 }} {...props}>
      {props.children}
    </h3>
  );
};

export default PageTitle;

type Props = {
  children: string;
};
export default function PageTitle({children}:Props) {
  return (
    <h3  {...props}>
      {props.children}
    </h3>
  );

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const initData = {
    name: "",
    class: ""
  };
  const condition = true;
  const exampleData = { name: "Alex", class: "4" };
  const [currentStudent, setCurrentStudent] = useState({});
  const [formData, setFormData] = useState({});
  useEffect(() => {
    setCurrentStudent(exampleData); // My example code to setState
    //The result of currentStudent is {name: "Alex", class: "4"}
    setFormData(condition ? exampleData : initData);
    console.log("useEffect =", formData);
  }, []);
  return <>{console.log("ui = ", formData)}</>;
}

import 'bootstrap-v4-rtl/dist/css/bootstrap-rtl.css'

<div class="row">
        <div className="col-md-3">۱</div>
        <div className="col-md-6">2</div>
        <div className="col-md-3">3</div>
    </div>