react typescript passing data into component code example

Example 1: react typescript pass component as prop

interface ParentCompProps {
  childComp?: React.ReactNode;
}

const ChildComp: React.FC = () => <h2>This is a child component</h2>

const ParentComp: React.FC<ParentCompProps> = (props) => {
  const { childComp } = props;
  return <div>{childComp}</div>;
};

function App() {
  return (
    <>
      <ParentComp childComp={<ChildComp />} />
      <ParentComp childComp={<h3>Child component 2</h3>} />
      <ParentComp childComp={(
        <div style={{border: '2px solid red'}}>
          <h4>Child component</h4>
          <p>With multiple children</p>
        </div>
      )} />
    </>
  );
}

Example 2: react pass parameter to component

import React, { Component } from 'react'; class App extends Component {  render() {    return (      <div>        <Greeting />      </div>    );  }} class Greeting extends Component {  render() {    const greeting = 'Welcome to React';     return <h1>{greeting}</h1>;  }} export default App;