Note I provided a more in-depth answer here

Runtime wrapper:

It's the most idiomatic way.

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

Note that children is a "special prop" in React, and the example above is syntactic sugar and is (almost) equivalent to <Wrapper children={<App/>}/>

---

Initialization wrapper / HOC

You can use an Higher Order Component (HOC). They have been added to the official doc recently.

// Signature may look fancy but it's just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

This can lead to (little) better performances because the wrapper component can short-circuit the rendering one step ahead with shouldComponentUpdate, while in the case of a runtime wrapper, the children prop is likely to always be a different ReactElement and cause re-renders even if your components extend PureComponent.

Notice that connect of Redux used to be a runtime wrapper but was changed to an HOC because it permits to avoid useless re-renders if you use the pure option (which is true by default)

You should never call an HOC during the render phase because creating React components can be expensive. You should rather call these wrappers at initialization.

---

Note that when using functional components like above, the HOC version do not provide any useful optimisation because stateless functional components do not implement shouldComponentUpdate

More explanations here: https://stackoverflow.com/a/31564812/82609

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

Concretely, a higher-order component is a function that takes a component and returns a new component.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

For example, say you have a CommentList component that subscribes to an external data source to render a list of comments:

class CommentList extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      // "DataSource" is some global data source
      comments: DataSource.getComments()
    };
  }

  componentDidMount() {
    // Subscribe to changes
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    // Clean up listener
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    // Update component state whenever the data source changes
    this.setState({
      comments: DataSource.getComments()
    });
  }

  render() {
    return (
      <div>
        {this.state.comments.map((comment) => (
          <Comment comment={comment} key={comment.id} />
        ))}
      </div>
    );
  }
}

Later, you write a component for subscribing to a single blog post, which follows a similar pattern:

class BlogPost extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      blogPost: DataSource.getBlogPost(props.id)
    };
  }

  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    this.setState({
      blogPost: DataSource.getBlogPost(this.props.id)
    });
  }

  render() {
    return <TextBlock text={this.state.blogPost} />;
  }
}

We can write a function that creates components, like CommentList and BlogPost, that subscribe to DataSource. The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let’s call the function withSubscription:

const CommentListWithSubscription = withSubscription(
  CommentList,
  (DataSource) => DataSource.getComments()
);

const BlogPostWithSubscription = withSubscription(
  BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id)
);

When CommentListWithSubscription and BlogPostWithSubscription are rendered, CommentList and BlogPost will be passed a data prop with the most current data retrieved from DataSource:

// This function takes a component...
function withSubscription(WrappedComponent, selectData) {
  // ...and returns another component...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ... that takes care of the subscription...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ... and renders the wrapped component with the fresh data!
      // Notice that we pass through any additional props
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

Normally you start out with React's JSX syntax for rendering something to the browser when learning about React. Basically JSX mixes HTML with JavaScript to get the best of both worlds.

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

Normally you start out with React's JSX syntax for rendering something to the browser when learning about React. Basically JSX mixes HTML with JavaScript to get the best of both worlds.

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

Pretty soon you will split out your first React 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;

Pretty soon you will split out your first React 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;

A common question followed by this act: how to pass the data as params (parameters) from one React component to another component? That's because you don't want to have a component rendering static data, but pass dynamic data to your component instead. That's where React's props come into play. You can pass data in React by defining custom HTML attributes to which you assign your data with JSX syntax. So don't forget the curly braces.

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

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>

First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}

import React from 'react' export default function Parent() { return ( <div> </div> ) } Parent.js

import React from 'react'

export default function Child() {
    return (
        <div>
            
        </div>
    )
}

Next, you'll import the child component in the parent component and return it.

import React from 'react'
import Child from './Child';

export default function Parent() {
  return (
    <div>
      <Child/>
    </div>
  )
}

Then you'll create a function and a button to trigger that function. Also, you'll create a state using the useState Hook to manage the data.

import React from 'react'
import Child from './Child';
import { Button } from 'semantic-ui-react';
import { useState } from 'react';
import './App.css';

export default function Parent() {
  const [data, setData] = useState('');
  
  const parentToChild = () => {
    setData("This is data from Parent Component to the Child Component.");
  }
  return (
    <div className="App">
      <Child/>
      
      <div>
        <Button primary onClick={() => parentToChild()}>Click Parent</Button>
      </div>
    </div>
  )
}

Pass the data as props when you are calling the child component like this:

<Child parentToChild={data}/>